jQuery表单验证——不使用name

最新推荐文章于 2022-11-23 22:00:29 发布

林灵会灭

最新推荐文章于 2022-11-23 22:00:29 发布

阅读量470

点赞数

分类专栏：前端文章标签： jQuery 表单验证 name 动态添加 json

本文链接：https://blog.csdn.net/qq_35159009/article/details/99624931

版权

前端专栏收录该内容

11 篇文章 1 订阅

订阅专栏

1. jQuery表单验证的正常使用

失去焦点时校验
js文件add.js

$(function(){
	//这里"#dataForm"是要验证表单的id
	vali=$("#dataForm").validate({
	//onfocusout失去焦点的事件
    onfocusout: function(element) { $(element).valid(); },
    rules:{
    //email是要校验input框的name
    email : {
    	required: true,
        email: true
    },
    data_2: {
    	required: true,
    	isPhone : true
    }}
	}); 
	});

html文件add.html
引入

<script src="/js/jquery.min.js?v=2.1.4"></script>
<script src="/js/plugins/validate/jquery.validate.min.js"></script>
<script src="/js/plugins/validate/messages_zh.min.js"></script>

messages_zh：存放中文提示语句，可进行修改；其他2个不动
具体的html文件就不展示了，
主要form有id，需要校验的input框有name即可进行校验

——————————————————————————————————————

但是，如果不能使用input框的name怎么办呢？
html是动态生成的，不能手写name。添加规则的操作是给input框增加了一个rules属性，但还是想要美美的jquery效果样式，怎么使用呢？

2. 变形——不使用name

敲代码的思路：

获取添加了某个规则的对象
返回input框的name值
将name值传给jQuery中rules的key值

input框
在这里插入图片描述
因为可为多个input框赋值同一规则，所以要用数组储存
以下全部是add.js文件中的内容

//返回rules为stro元素的name值，是一个数组
function maching_name(stro){
	//获取添加了某个规则的对象
	var inps=$("[rules="+stro+"]");
	var myArray=new Array()
	for(var i=0;i<inps.length;i++){
		//返回input框的name值(固有属性可以直接用点)
		var name_m=inps[i].name;
		myArray.push(name_m);
		//私有属性必须使用getAttribute
		//rules_m=inps[i].getAttribute("rules");
		}
	return myArray;
}

传给jQuery中rules的key值
能直接在应该有name值的地方放函数吗？

 rules:{
	maching_name('qq'): {
		isQQnumber : true,
    	required: true
}}

答案是不能，因为这里放的是静态的值，不会执行这个函数
解决思路：
因为是一个json对象，所以我动态地给这个对象进行赋值
先写一个动态创建的方法

var rules={};
//构建一个空json对象，并动态添加属性
function createJson(prop, val) {
    if(typeof val === "undefined") {
    	delete rules[prop];
    }else {
    	rules[prop] = val;
    	}
}

再去真正动态创建

function actjson(){
	//这里的isQQnumber，是jquery.validate.extend.js中添加的检验条件名称
	//qq号码
	var qq=maching_name('qq');//获取name数组
	for(var i=0;i<qq.length;i++){
		createJson(qq[i], {isQQnumber : true})//为json添加属性
	}
	}

放到rules该在的地方

$(function(){
	//actjson()
	vali=$("#dataForm").validate({
    onfocusout: function(element) { $(element).valid(); },
    rules:actjson()
	}); 
	});

这样子，我们就实现了不局限于使用name来进行表单验证的功能啦
补充的是：
isQQnumber这个不是jQuery中内置的，而是我们自己添加的
写在了jquery.validate.extend.js文件中，也可以自己建

$(document).ready(function(){
	$.validator.setDefaults({       
		  submitHandler: function(form) {    
		 		form.submit();    
		}       
	});  
	//qq号码验证
	jQuery.validator.addMethod("isQQnumber", function(value, element) {   
	    var qq =  /^[1-9][0-9]{4,9}$/;
	    return this.optional(element) || (qq.test(value));
	}, "请正确填写您的qq号");
	});

在add.html中增加一个引入

<!-- 利用jQuery添加自定义的校验规则 -->
<script src="/js/plugins/validate/jquery.validate.extend.js"></script>
<!-- 中文提示 -->
<script src="/js/plugins/validate/messages_zh.min.js"></script>

大功告成！
——————————————————————————————————————
感悟：不要担心用了插件都是写死的，js中万物皆对象，也可以

vali=$("#dataForm").validate(传一个对象进去）

这样rules变为一个属性，也可以动态添加修改
——————————————————————————————————————
完整add.js代码：

var prefix = "/business/dataForm";
$(function(){
	//actjson()
	vali=$("#dataForm").validate({
    onfocusout: function(element) { $(element).valid(); },
    rules:actjson()
	}); 
	});
var rules={};
//构建一个空json对象，并动态添加属性
function createJson(prop, val) {
    if(typeof val === "undefined") {delete rules[prop];}else {rules[prop] = val;}
}
//根据传回的name，构建json对象，传给rules，以达到不使用name作为表单验证桥梁的作用
function actjson(){
	//这里的isQQnumber，是jquery.validate.extend.js中添加的检验条件名称
	//qq号码
	var qq=maching_name('qq');
	for(var i=0;i<qq.length;i++){
		createJson(qq[i], {isQQnumber : true})//为validate添加rules的属性;qq规则有问题}
	}
	//手机号
	var mobile=maching_name('mobile');
	for(var i=0;i<mobile.length;i++){
		createJson(mobile, {required: true,isPhone : true})
	}
	//身份证号
	var id=maching_name('id');
	for(var i=0;i<id.length;i++){
		createJson(id[i], {required: true,isIdentity : true})
	}
	//ip地址
	var ip=maching_name('ip');
	for(var i=0;i<ip.length;i++){
		createJson(ip[i], {isIp : true})
	}
	//整数
	var integer=maching_name('integer');
	for(var i=0;i<integer.length;i++){
		createJson(integer[i], {digits:true})
	}
	//全英文
	var english=maching_name('english');
	for(var i=0;i<english.length;i++){
		createJson(english[i], {isEnglish:true})
	}
	//英文数字与字母
	var engAndNum=maching_name('englishAndNum');
	for(var i=0;i<engAndNum.length;i++){
		createJson(engAndNum[i], {isEngAndNum : true})
	}
	//中文
	var chinese=maching_name('chinese');
	for(var i=0;i<chinese.length;i++){
		createJson(chinese[i], {required: true,isChinese: true})
	}
	//邮箱
	var email=maching_name('email');
	for(var i=0;i<email.length;i++){
		createJson(email[i], {email : true})
	}
	//金额
	var money=maching_name('money');
	for(var i=0;i<money.length;i++){
		createJson(money[i], {isMoney : true})
	}
	
    console.log(rules);
	return rules
}
//返回rules为stro元素的name值，是一个数组
function maching_name(stro){
	var inps=$("[rules="+stro+"]");
	var myArray=new Array()
	for(var i=0;i<inps.length;i++){
		var name_m=inps[i].name;
		myArray.push(name_m);
		//rules_m=inps[i].getAttribute("rules");
		}
	return myArray;
}
	

function formSubmit(form) {
    if(validate()){
    	
        var data = {
            form : {},
            tableName : $("#tableName").val()
        };
        var elements = $(form).find("[name]");
        
        $.each(elements, function (i, e) {
            if(e.type == "password"){ //对密码进行加密
                data.form[e.name] = md5($(e).val());
            }else if(e.type == "checkbox"){// 对多选框进行合并
                if($(e).is(":checked")){
                    if(typeof(data.form[e.name]) != "undefined"){
                        data.form[e.name] += "," + $(e).val();
                    }else{
                        data.form[e.name] = $(e).val();
                    }
                }
            }else if(e.type == "radio"){
                if($(e).is(":checked")){
                    data.form[e.name] = $(e).val();
                }
            } else{
                data.form[e.name] = $(e).val();
            }
        });
        data = JSON.stringify(data);

        jQuery.post(prefix + "/save", {
            data : data
        }, function (r) {
            if(r.code == 0){
                parent.layer.msg(r.msg);
                parent.reLoad();
                var index = parent.layer.getFrameIndex(window.name); // 获取窗口索引
                parent.layer.close(index);
            }else{
                parent.layer.msg(r.msg);
            }
        });
        return false;
    }
    return false;
}

这里的function formSubmit未采用jquery方式，下一篇继续介绍
jquery.validate.extend.js文件

/*this is basic form validation using for validation person's basic information author:Clara Guo data:2017/07/20*/
$(document).ready(function(){
	$.validator.setDefaults({       
		  submitHandler: function(form) {    
		 		form.submit();    
		}       
	});  
	//qq号码验证
	jQuery.validator.addMethod("isQQnumber", function(value, element) {   
	    var qq =  /^[1-9][0-9]{4,9}$/;
	    return this.optional(element) || (qq.test(value));
	}, "请正确填写您的qq号");
	//手机号码验证身份证正则合并：(^\d{15}$)|(^\d{17}([0-9]|X)$)
	jQuery.validator.addMethod("isPhone",function(value,element){
		var length = value.length;
		var phone=/^1[3|4|5|7|8][0-9]\d{8}$/;
		return this.optional(element)||(length == 11 && phone.test(value));
	},"请填写正确的11位手机号");
	//电话号码验证
	jQuery.validator.addMethod("isTel",function(value,element){
		var tel = /^(0\d{2,3}-)?\d{7,8}$/g;//区号3,4位,号码7,8位
		return this.optional(element) || (tel.test(value));
	},"请填写正确的座机号码");
	//姓名校验
	jQuery.validator.addMethod("isName",function(value,element){
		var name=/^[\u4e00-\u9fa5]{2,6}$/;
		return this.optional(element) || (name.test(value));
	},"姓名只能用汉字,长度2-4位");
	//校验用户名
	jQuery.validator.addMethod("isUserName",function(value,element){
		var userName=/^[a-zA-Z0-9]{2,13}$/;
		return this.optional(element) || (userName).test(value);
	},'请输入数字或者字母,不包含特殊字符');
	
	//校验身份证
	jQuery.validator.addMethod("isIdentity",function(value,element){
		var id= /^(\d{15}$|^\d{18}$|^\d{17}(\d|X))$/;
		return this.optional(element) || (id.test(value));
	},"请输入正确的15或18位身份证号,末尾为大写X");
	//校验ip地址
	jQuery.validator.addMethod("isIp",function(value,element){
		var ip= /^([0-9]{1,3}\.{1}){3}[0-9]{1,3}$/;
		return this.optional(element) || (ip.test(value));
	},"请输入符合规范ip地址");
	
	
	
	//全英文字母
	jQuery.validator.addMethod("isEnglish",function(value,element){
		var eng= /^[a-zA-Z]+$/;
		return this.optional(element) || (eng.test(value));
	},"请输入全英字母");
	
	
	//英文字母或数字
	jQuery.validator.addMethod("isEngAndNum",function(value,element){
		var engAndNum=  /^[a-zA-Z0-9]+$/;
		return this.optional(element) || (engAndNum.test(value));
	},"请输入英文字母或数字");
	
	
	//全中文
	jQuery.validator.addMethod("isChinese",function(value,element){
		var chinese= /^[\u4E00-\u9FA5]+$/;
		return this.optional(element) || (chinese.test(value));
	},"请输入中文");
	
	
	
	//金额
	jQuery.validator.addMethod("isMoney",function(value,element){
		var money= /^([1-9][\d]{0,7}|0)(\.[\d]{1,2})?$/;
		return this.optional(element) || (money.test(value));
	},"请输入金额数值");
	//校验出生日期
	jQuery.validator.addMethod("isBirth",function(value,element){
		var birth = /^(19|20)\d{2}-(1[0-2]|0?[1-9])-(0?[1-9]|[1-2][0-9]|3[0-1])$/;
		return this.optional(element) || (birth).test(value);
	},"出生日期格式示例2000-01-01");
	//校验新旧密码是否相同
	jQuery.validator.addMethod("isdiff",function(){
		var p1=$("#pwdOld").val();
		var p2=$("#pwdNew").val();
		if(p1==p2){
			return false;
		}else{
			 return true;
		}
		});
	//校验新密码和确认密码是否相同
	jQuery.validator.addMethod("issame",function(){
		var p3=$("#confirm_password").val();
		var p4=$("#pwdNew").val();
		if(p3==p4){
			return true;
		}else{
			 return false;
		}
		});
	//校验基础信息表单
	$("#basicInfoForm").validate({
		errorElement:'span',
		errorClass:'help-block error-mes',
		rules:{
			name:{
				required:true,
				isName:true
			},
			sex:"required",
			birth:"required",
            mobile:{
				required:true,
				isPhone:true
			},
			email:{
				required:true,
				email:true
			}
		},
		messages:{
			name:{
				required:"请输入中文姓名",
				isName:"姓名只能为汉字"
			},
			sex:{
				required:"请输入性别"
			},
			birth:{
				required:"请输入出生年月"
			},
            mobile:{
				required:"请输入手机号",
				isPhone:"请填写正确的11位手机号"
			},
			email:{
				required:"请输入邮箱",
				email:"请填写正确的邮箱格式"
			}
		},
	
		errorPlacement:function(error,element){
			element.next().remove();
			element.closest('.gg-formGroup').append(error);
		},
		
		highlight:function(element){
			$(element).closest('.gg-formGroup').addClass('has-error has-feedback');
		},
		success:function(label){
			var el = label.closest('.gg-formGroup').find("input");
			el.next().remove();
			label.closest('.gg-formGroup').removeClass('has-error').addClass("has-feedback has-success");
			label.remove();
		},
		submitHandler:function(form){
			alert("保存成功!");
		}
	});
	
	//校验修改密码表单
	$("#modifyPwd").validate({
		onfocusout: function(element) { $(element).valid()},
		 debug:false, //表示校验通过后是否直接提交表单
		 onkeyup:false, //表示按键松开时候监听验证
		rules:{
			pwdOld:{
				required:true,
				minlength:6
			},
            pwdNew:{
			   required:true,
			   minlength:6,
			   isdiff:true,
			   //issame:true,
		   },
			confirm_password:{
			  required:true,
			  minlength:6,
			  issame:true,
			}
		  
		   },
		messages:{
			 	pwdOld : {
					 required:'必填',
					 minlength:$.validator.format('密码长度要大于6')
				},
            	pwdNew:{
				   required:'必填',
				   minlength:$.validator.format('密码长度要大于6'),
				   isdiff:'原密码与新密码不能重复',
				  
			   },
				confirm_password:{
				   required:'必填',
				   minlength:$.validator.format('密码长度要大于6'),
				   issame:'新密码要与确认新密码一致',
				}
		
		},
		errorElement:"mes",
		errorClass:"gg-star",
		errorPlacement: function(error, element) 
		{ 
			element.closest('.gg-formGroup').append(error);

		}
	});
});

这里展示了一个另外的使用jquery校验的表单，你会发现能够直接使用name是有多么方便。
messages_zh.min.js内容，无修改

/*! jQuery Validation Plugin - v1.13.1 - 10/14/2014
 * http://jqueryvalidation.org/
 * Copyright (c) 2014 Jörn Zaefferer; Licensed MIT */
! function (a) {
    "function" == typeof define && define.amd ? define(["jquery", "jquery.validate.min"], a) : a(jQuery)
}(function (a) {
    var icon = "<i class='fa fa-times-circle'></i>  ";
    a.extend(a.validator.messages, {
        required: icon + "必填",
        remote: icon + "请修正此栏位",
        email: icon + "请输入有效的电子邮件",
        url: icon + "请输入有效的网址",
        date: icon + "请输入有效的日期",
        dateISO: icon + "请输入有效的日期 (YYYY-MM-DD)",
        number: icon + "请输入正确的数字",
        digits: icon + "只能输入数字",
        creditcard: icon + "请输入有效的信用卡号码",
        equalTo: icon + "你的输入不相同",
        extension: icon + "请输入有效的后缀",
        maxlength: a.validator.format(icon + "最多 {0} 个字"),
        minlength: a.validator.format(icon + "最少 {0} 个字"),
        rangelength: a.validator.format(icon + "请输入长度为 {0} 至 {1} 之间的字串"),
        range: a.validator.format(icon + "请输入 {0} 至 {1} 之间的数值"),
        max: a.validator.format(icon + "请输入不大于 {0} 的数值"),
        min: a.validator.format(icon + "请输入不小于 {0} 的数值")
    })
});

林灵会灭

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery表单验证——不使用name

1. jQuery表单验证的正常使用失去焦点时校验js文件add.js$(function(){ //这里"#dataForm"是要验证表单的id vali=$("#dataForm").validate({ //onfocusout失去焦点的事件 onfocusout: function(element) { $(element).valid(); }, rules:...
复制链接

扫一扫

专栏目录