注册form表单jquery验证提示信息
首页 /  web前端 /  JavaScript /  jQuery特效 / js表单验证(员某人)

0 1 466

js表单验证(员某人)

注册form表单jquery验证提示信息

js表单验证(员某人)_图一

function Vator(form) {
		this.Config = {
			errorClass : "text-error",
			highlight : function(element) { // hightlight error inputs
				element.closest('.form-group').addClass('has-error'); // set error class to the control group
			}
		};
		this.form = jQuery("#register");
	}
	Vator.prototype = {
		//用户名
		check_username : function() { 
			var username_d = jQuery("#username");
			var value = username_d.val();
			if (value.length == 0) {
				this.showError(username_d, "用户名不能为空");
				return false;
			}else{
				this.success(username_d);
			}
			//var reg = new RegExp(/^[0-9a-zA-Z]{3,12}$/);//用户名规则
			var reg = new RegExp(/^[a-zA-Z0-9_]{1,}$/);
			if (!reg.test(value)) {
				this.showError(username_d, "用户名不符合要求");
				return false;
			}else{
				this.success(username_d);
			}
			return true;
		},//密码
		check_password:function(){
			var password_d = jQuery("#password");
			var value = password_d.val();
			if(value.length == 0){
				this.showError(password_d, "密码不能为空");
				return false;
			}else{
				this.success(password_d);
			}
			if(value.length < 5){
				this.showError(password_d, "密码长度不能少于5位");
				return false;
			}else{
				this.success(password_d);
			}
			return true;
		},
		//密码第二遍
		check_rpassword :function(){
			var password2_d = jQuery("#password2");
			var value = password2_d.val();
			if(value == ""){
				this.showError(password2_d, "再次输入密码");
				return false;
			}else if(value !=jQuery("#password").val())
			{
				this.showError(password2_d, "输入的密码不一致");
				return false;
			}
			this.success(password2_d);
			return true;
		},
		//邮箱
		check_email:function(){
			var email_d = jQuery("#email");
			var value = jQuery("#email").val();
			if(value.length==0){
				this.showError(email_d,"请输入邮箱");
				return false;
			}
			var reg = new RegExp(/^(w-*.*)+@(w-?)+(.w{2,})+$/);
			if(!reg.test(value)){
				this.showError(email_d,"邮箱格式错误");
				return false;
			}

		    this.success(email_d);
			return true;
		},
		//真实姓名
		check_realname:function(){
			var realname_d = jQuery("#realname");
			var value = realname_d.val();
			if(value.length == 0){
				this.showError(realname_d,"请输入昵称");
				return false;
			}
			var reg = new RegExp(/^[0-9a-zA-Zu4e00-u9fa5_]{2,16}$/);
			if(!reg.test(value)){
				this.showError(realname_d,"输入的昵称不合法");
				return false;
			}
			
			var unLen = value.replace(/[^x00-xff]/g, "**").length;
		    if(unLen < 1 || unLen > 10) {
		    	this.showError(realname_d,unLen < 1 ? '昵称不能为空' : '昵称不能超过 5 个汉字');
		    	return false;
		    }
			
			this.success(realname_d);
			return true;
		},
		//年级
		check_grade:function(){
			var grade_d = jQuery("#grade");
			var value = grade_d.val();
			if(value == 0){
				this.showError(grade_d,"请选择年级");
				return false;
			}
			this.success(grade_d);
			return true;
		},
		//显示错误
		showError : function(_element, msg) {
			_element.parents(".form-group").find(".tips-block").remove();
			_element.parents(".col-item-r").find("i.right").remove();
			var ehtml = "<div for='' class='tips-block "
					+ this.Config.errorClass + "'>" + msg + "</div>";
			_element.parents(".form-group").addClass("has-error").append(ehtml);
			if (typeof this.Config.highlight == 'function') {
				this.Config.highlight(this.form);
			}
		},
		//验证成功显示
		success : function(_element) {
			_element.parents(".form-group").removeClass("has-error");
			_element.parents(".form-group").find(".tips-block").remove();
			_element.parents(".col-item-r").find("i.right").remove();
			_element.parents(".col-item-r").append('<i class="right"></i>');
		},
		//初始化事件绑定
		init : function() {
			var _this = this;
			//blur和keyup触发检查
			jQuery("#username").on("blur",function(){
				_this.check_username();
			});
			jQuery("#password").on("blur keyup",function(){
				_this.check_password();
				if(jQuery("#password2").val()){
					_this.check_rpassword();
				}
			});
			jQuery("#password2").on("blur",function(){
				_this.check_rpassword();
			});
			jQuery("#email").on("blur",function(){
				_this.check_email();
			});
			jQuery("#realname").on("blur",function(){
				_this.check_realname();
			});
			jQuery("#grade").on("change",function(){
				_this.check_grade();
			});
		},
		//整体检查
		action : function() {
			if (this.checkForm()) {
				alert('注册成功');
			//	this.form.submit();
			}
			return false;
		},
		//表单验证
		checkForm : function() {
			var flag = true;
			if (!this.check_username()) {
				flag = false;
			}
			if(!this.check_password()){
				flag = false;
			}
			if(!this.check_rpassword()){
				flag = false;
			}
			if(!this.check_email()){
				flag = false;
			}
			if(!this.check_realname()){
				flag = false;
			}
			if(!this.check_grade()){
				flag = false;
			}
			return flag;
		}

	};
下载所需:5 金币 下载 演示

[来源] http://yuanmouren.erlyun.com/p.php?id=15

[声明] 本站资源来自用户分享,如损害你的权益请联系客服QQ:120074275给予处理。

luck 2017-08-22 15:11
1
送花
20积分一朵