jQuery表單驗證——不使用name

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} 的數值")
    })
});