from表單數據的合法性驗證是個很常見的需求，jQuery提供了一個插件：jquery validate 官網下載。
若想使用需先引用jquery.validate.js，並且要在jquery.js之後引用。
<code>
/<code>
把現在寫的項目拿來演示一下，其使用了bootstrap框架。
<code>$(function() {
jQuery.validator.addMethod("regUserName",
function(value, element) {
return this.optional(element) || /^[0-9]*[a-zA-Z_\\\\u4e00-\\\\u9fa5]+[0-9]*$/.test(value);
},
"註冊暱稱為4-10位數字、下劃線、中文或英文字母，但不能全是數字"); jQuery.validator.addMethod("isMobile",
function(value, element) {
var length = value.length;
var mobile = /^((\\(\\d{2,3}\\))|(\\d{3}\\-))?1[3,8,5]{1}\\d{9}$/;
return this.optional(element) || (length == 11 && mobile.test(value));
},
"請正確填寫您的手機號碼"); //登錄帳號合法性驗證 jQuery.validator.addMethod("logAccountCheck", function (value, element) { var length = value.length; var mobile = /^((\\(\\d{2,3}\\))|(\\d{3}\\-))?1[3,8,5]{1}\\d{9}$/; return this.optional(element) || (length == 11 && mobile.test(value)) || /^[\\\\u0391-\\\\uFFE5\\w]+$/.test(value); }, "暱稱不符合登錄規則");$("#fillForm").validate({ errorElement: 'span', errorClass: 'help-block', focusInvalid: false, rules: { new_userName: { required: true, regUserName: true, minlength: 4, maxlength: 10 }, new_userPwd: { required: true, rangelength: [5, 15] }, new_userPwd_twice: { required: true, equalTo: "#new_userPwd" }, new_userEmail: { required: true, email: true }, new_userPhone: { required: true, isMobile:true, digits: true, minlength: 11, maxlength: 11 }, new_userBirth: { required: true }, new_userCollege: { required: true }, new_userMajor: { required: true } }, messages: { new_userName: { required: '暱稱不能為空', minlength: '暱稱最少為4位', maxlength: '暱稱最多為10位' }, new_userPwd: { required: '密碼不能為空', rangelength: $.validator.format("密碼長度必須在 {0} 到 {1} 之間") }, new_userPwd_twice: { required: '此項不能為空', equalTo: '兩次輸入的密碼必須一致' }, new_userEmail: { required: '郵箱不能為空', email: '郵箱格式不正確(例如: [email protected])' }, new_userPhone: { required: '電話號不能為空', digits: '電話號必須是數字', minlength: '電話號為11位', maxlength: '電話號為11位' }, new_userBirth: { required: '生日不能為空' }, new_userCollege: { required: '學院不能為空' }, new_userMajor: { required: '專業不能為空' } }, highlight: function (element) { $(element).closest('.form-group').addClass('has-error'); }, success: function (label) { label.closest('.form-group').removeClass('has-error').addClass('has-success'); label.remove(); }, errorPlacement: function (error, element) { element.parent('div').after(error); }, submitHandler: function (form) { var result = { "new_userName": $("#new_userName").val(), "new_userPwd": $("#new_userPwd").val(), "new_userEmail": $("#new_userEmail").val(), "new_userPhone": $("#new_userPhone").val(), "new_userBirth": $("#new_userBirth").val(), "new_userGender": $("input[name='new_userGender']:checked").val(), "new_userCollege": $("#new_userCollege").val() + ',' + $("#new_userMajor").val() }; result.new_userIP = ip; var res = JSON.stringify(result); alert(res); return false; } })})
/<code>html文件跟平常一樣，主要在js中進行驗證：
<code>$(function() {
jQuery.validator.addMethod("regUserName",
function(value, element) {
return this.optional(element) || /^[0-9]*[a-zA-Z_\\\\u4e00-\\\\u9fa5]+[0-9]*$/.test(value);
},
"註冊暱稱為4-10位數字、下劃線、中文或英文字母，但不能全是數字"); jQuery.validator.addMethod("isMobile",
function(value, element) {
var length = value.length;
var mobile = /^((\\(\\d{2,3}\\))|(\\d{3}\\-))?1[3,8,5]{1}\\d{9}$/;
return this.optional(element) || (length == 11 && mobile.test(value));
},
"請正確填寫您的手機號碼"); //登錄帳號合法性驗證 jQuery.validator.addMethod("logAccountCheck", function (value, element) { var length = value.length; var mobile = /^((\\(\\d{2,3}\\))|(\\d{3}\\-))?1[3,8,5]{1}\\d{9}$/; return this.optional(element) || (length == 11 && mobile.test(value)) || /^[\\\\u0391-\\\\uFFE5\\w]+$/.test(value); }, "暱稱不符合登錄規則");$("#fillForm").validate({ errorElement: 'span', errorClass: 'help-block', focusInvalid: false, rules: { new_userName: { required: true, regUserName: true, minlength: 4, maxlength: 10 }, new_userPwd: { required: true, rangelength: [5, 15] }, new_userPwd_twice: { required: true, equalTo: "#new_userPwd" }, new_userEmail: { required: true, email: true }, new_userPhone: { required: true, isMobile:true, digits: true, minlength: 11, maxlength: 11 }, new_userBirth: { required: true }, new_userCollege: { required: true }, new_userMajor: { required: true } }, messages: { new_userName: { required: '暱稱不能為空', minlength: '暱稱最少為4位', maxlength: '暱稱最多為10位' }, new_userPwd: { required: '密碼不能為空', rangelength: $.validator.format("密碼長度必須在 {0} 到 {1} 之間") }, new_userPwd_twice: { required: '此項不能為空', equalTo: '兩次輸入的密碼必須一致' }, new_userEmail: { required: '郵箱不能為空', email: '郵箱格式不正確(例如: [email protected])' }, new_userPhone: { required: '電話號不能為空', digits: '電話號必須是數字', minlength: '電話號為11位', maxlength: '電話號為11位' }, new_userBirth: { required: '生日不能為空' }, new_userCollege: { required: '學院不能為空' }, new_userMajor: { required: '專業不能為空' } }, highlight: function (element) { $(element).closest('.form-group').addClass('has-error'); }, success: function (label) { label.closest('.form-group').removeClass('has-error').addClass('has-success'); label.remove(); }, errorPlacement: function (error, element) { element.parent('div').after(error); }, submitHandler: function (form) { var result = { "new_userName": $("#new_userName").val(), "new_userPwd": $("#new_userPwd").val(), "new_userEmail": $("#new_userEmail").val(), "new_userPhone": $("#new_userPhone").val(), "new_userBirth": $("#new_userBirth").val(), "new_userGender": $("input[name='new_userGender']:checked").val(), "new_userCollege": $("#new_userCollege").val() + ',' + $("#new_userMajor").val() }; result.new_userIP = ip; var res = JSON.stringify(result); alert(res); return false; } })})
/<code>簡單用法：
1.：rules裡定義輸入框規則，常見的有required, minlength, maxlength, email, 其中使用輸入框的name屬性來指定輸入框。
2：messages裡定義當輸入內容不符合規則時顯示的信息，如果自定義則顯示默認的錯誤信息。
3：可以自定義規則，比如上面代碼開頭部分定義了自定義規則，可以根據自己的需求仿照代碼即可，而且網上也提供了現成的自定義驗證規則。
4：當輸入框均符合規則時，可以點擊提交，此時，會指定submitHandler函數。
分享到:
閱讀更多 商務互吹 的文章
