當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

jQuery-easyui和validate表单验证实例

發布時間：2025/3/21 编程问答 32 豆豆

生活随笔收集整理的這篇文章主要介紹了 jQuery-easyui和validate表单验证实例小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

jQuery EasyUI 表單 -?表單驗證插件validatebox

使用時需要向頁面引入兩個css文件如下:

validatebox表單驗證實例

1 $(function () { 2 $("#name").validatebox({ 3 required:true, 4 validType:['minlengthUser[6]','maxlengthUser[16]','checkUser'], 5 missingMessage:"請輸入用戶名" 6 7 }) 8 9 //自定義驗證規則 10 $.extend($.fn.validatebox.defaults.rules,{ 11 12 //驗證用戶名的格式 13 checkUser:{ 14 validator:function (value, param) { 15 return /^[a-zA-Z][a-zA-Z0-9_]{5,17}$/.test(value) 16 }, 17 message:"6~18個字符，可使用字母、數字、下劃線，需以字母開頭" 18 }, 19 20 }) 21 //easyui表單提交的控制 22 $('#loginForm').form({ 23 24 onSubmit:function(){ 25 return $(this).form('validate'); 26 }, 27 success:function(){ 28 $.messager.alert('Info', "恭喜您,注冊成功!"); 29 } 30 }); 31 }) View Code

validate表單驗證

需要引入兩個外部js庫

validate表單驗證實例

1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>驗證框架的使用</title> 6 7 <style type="text/css"> 8 .error{ 9 color: red; 10 } 11 </style> 12 </head> 13 <body> 14 <form action="success.html" method="post" id="myForm"> 15 用戶名：<input name="userName"> <br/> 16 密碼：<input name="password" type="password" id="pwd"> <br/> 17 確認密碼：<input name="repPassword"type="password" > <br/> 18 郵箱：<input name="email"> <br/> 19 手機號：<input name="phone"> <br/> 20 性別：<input name="sex" type="radio" value="男" checked>男 21 <input name="sex" type="radio" value="女">女<br/> 22 是否同意協議<input type="checkbox" name="context"><br/> 23 <button type="submit">注冊</button> 24 </form> 25 26 27  28 <script type="text/javascript" src="../js/jquery-1.8.3.js"></script> 29 <script type="text/javascript" src="../js/jquery.validate.js"></script> 30 <script type="text/javascript"> 31 $(function(){ 32 //form表單的驗證事件 33 $("#myForm").validate({ 34 //驗證規則需要對哪些元素做驗證 35 rules:{ 36 userName:{ 37 required:true 38 }, 39 password:{ 40 required:true, 41 minlength:6, 42 maxlength:10 43 }, 44 repPassword:{ 45 required:true, 46 minlength:6, 47 maxlength:10, 48 equalTo:"#pwd" 49 }, 50 email:{ 51 required:true, 52 email:true 53 }, 54 phone:{ 55 required:true, 56 checkPhone:true //自己書寫的手機驗證正則 57 }, 58 context:{ 59 required:true 60 } 61 }, //rules end 62 //不符合驗證規則的錯誤信息 63 messages:{ 64 userName:{ 65 required:"請輸入用戶名" 66 }, 67 password:{ 68 required:"請輸入密碼", 69 minlength:"密碼長度不能少于6位", 70 maxlength:"密碼長度不能大于10位" 71 }, 72 repPassword:{ 73 required:"請輸入密碼", 74 minlength:"密碼長度不能少于6位", 75 maxlength:"密碼長度不能大于10位", 76 equalTo:"兩次密碼輸入不一致" 77 }, 78 email:{ 79 required:"請輸入郵箱", 80 email:"郵箱格式不正確" 81 }, 82 phone:{ 83 required:"請輸入手機號", 84 checkPhone:"電話號碼格式不正確"//自己書寫的手機驗證正則 85 }, 86 context:{ 87 required:"您沒有同意協議" 88 } 89 }, // messages end 90 //鼠標失去焦點立即驗證 91 onfocusout:function(element){ 92 $(element).valid(); 93 } 94 }); // end validate 95 //增加了手機驗證正則 96 jQuery.validator.addMethod("checkPhone",function(value,element){ 97 var tel = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/ 98 return this.optional(element) || (tel.test(value)); 99 },"電話號碼格式不正確") 100 }) 101 </script> 102 103 104 105 106 </body> 107 </html> View Code

? $(function () {
$("#name").validatebox({
required:true,
validType:['minlengthUser[6]','maxlengthUser[16]','checkUser'],
missingMessage:"請輸入用戶名"

})
$("#phone").validatebox({
required:true,
validType:['userTel'],
missingMessage:"請輸入電話號碼"
})
$("#userPwd").validatebox({
required:true,
validType:['minlength[6]','maxlength[16]'],
missingMessage:"請輸入密碼"
})
$("#userePwd").validatebox({
required:true,
validType:['minlength[6]','maxlength[16]','checkPass','equalTo["#userPwd"]'],
missingMessage:"請再次輸入密碼"
})

//自定義驗證規則
$.extend($.fn.validatebox.defaults.rules,{

//驗證用戶名的格式
checkUser:{
validator:function (value, param) {
return /^[a-zA-Z][a-zA-Z0-9_]{5,17}$/.test(value)
},
message:"6~18個字符，可使用字母、數字、下劃線，需以字母開頭"
},
//驗證用戶名的長度
minlengthUser:{
validator:function(value,param){
return value.length>=param[0];
},
message:"用戶名長度至少為{0}位"
},
maxlengthUser:{
validator:function(value,param){
return value.length<param[0];
},
message:"用戶名長度必須小于{0}位"
},
//驗證密碼最小長度
minlength:{
validator:function(value,param){
return value.length>=param[0];
},
message:"密碼長度至少為{0}位"
},
//驗證密碼最大長度
maxlength:{
validator:function(value,param){
return value.length<param[0];
},
message:"密碼長度必須小于{0}位"
},
//驗證兩次密碼是否一致
equalTo: {
validator: function (value, param){
return $(param[0]).val() == value;
},
message: "兩次輸入密碼不匹配"
},
//驗證手機號
userTel: {
validator: function (value, param) {
return /^1[3|4|5|8|9][0-9]{9}$/.test(value);
},
message: "手機號碼格式不正確"
}

})
//easyui表單提交的控制
$('#loginForm').form({

onSubmit:function(){
return $(this).form('validate');
},
success:function(){
$.messager.alert('Info', "恭喜您,注冊成功!");
}
});

轉載于:https://www.cnblogs.com/zqr99/p/7554495.html

總結

以上是生活随笔為你收集整理的jQuery-easyui和validate表单验证实例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： python-day49--前端 htm
下一篇： Delphi设置表格样式