福寿无疆行为和组织分离,Validate自定义规程的利用案例

By admin in 4858美高梅 on 2019年4月18日

<!DOCTYPE html>
<html xmlns=”;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″
/>
<title></title>
<script src=”jquery-3.2.1.js”></script>
<script
src=”jquery-validation-1.17.0/dist/jquery.validate.js”></script>
<script src=”jquery.metadata.js”></script>
<script
src=”jquery-validation-1.17.0/dist/localization/messages_zh.js”></script>
<script>
$(function () {
//$(“#addForm”).validate({
// rules: {
// username: {
// required: true,
// minlength: 4
// },
// email: {
// required: true,
// email: true
// },
// address: “url”,
// content: “required”
// }
//});
$(“#addForm”).validate({
rules: {
username: { required: true, minlength: 2 },
email: { required: true, email: true },
address: “url”,
content: “required”,
cvalcode: { formual: “7+9” }
}
});
});
$.validator.addMethod(
“formual”,
function (value, element, param) {
return value == eval(param);
},
‘请输入正确的结果’
);
</script>
</head>
<body>
<form action=”#” method=”post” id=”addForm”>
<p>
姓名:
<input type=”text” name=”username” value=” ” />
</p>
<p>
电子邮件:
<input type=”text” name=”email” value=” ” />
</p>
<p>
网址:
<input type=”text” name=”address” value=” ” />
</p>
<p>
自小编的评价:
<textarea name=”content”></textarea>
</p>
<label for=”cvalcode”>验证码</label>
<input type=”text” name=”cvalcode” id=”cvalcode” value=” ”
/>=7+9
<p>
<input type=”submit” name=”tijiao” value=”提交” />
</p>
</form>
</body>
</html>

<!DOCTYPE html>
<html xmlns=”;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″
/>
福寿无疆行为和组织分离,Validate自定义规程的利用案例。<title></title>
<script src=”jquery-3.2.1.js”></script>
<script
src=”jquery-validation-1.17.0/dist/jquery.validate.js”></script>
<script src=”jquery.metadata.js”></script>
<script
src=”jquery-validation-1.17.0/dist/localization/messages_zh.js”></script>
<script>
$(function () {
//$(“#addForm”).validate({
// rules: {
// username: {
// required: true,
// minlength: 4
// },
// email: {
// required: true,
// email: true
// },
// address: “url”,
// content: “required”
// }
//});
$(“#addForm”).validate({
rules: {
username: { required: true, minlength: 2 },
email: { required: true, email: true },
address: “url”,
content: “required”,
cvalcode: { formual: “7+9” }
}
});
});
$.validator.addMethod(
“formual”,
function (value, element, param) {
return value == eval(param);
},
‘请输入正确的结果’
);
</script>
</head>
<body>
<form action=”#” method=”post” id=”addForm”>
<p>
姓名:
<input type=”text” name=”username” value=” ” />
</p>
<p>
电子邮件:
<input type=”text” name=”email” value=” ” />
</p>
<p>
网址:
<input type=”text” name=”address” value=” ” />
</p>
<p>
本身的评说:
<textarea name=”content”></textarea>
</p>
<label for=”cvalcode”>验证码</label>
<input type=”text” name=”cvalcode” id=”cvalcode” value=” ”
/>=7+9
<p>
4858美高梅,<input type=”submit” name=”tijiao” value=”提交” />
</p>
</form>
</body>
</html>

<!DOCTYPE html>
<meta charset=”utf-8″>
<html>
<head>
<title></title>
<style type=”text/css”>
*{
font-family: Verdana,font-size:96%;
}
label{width: 10em;float: left;}
label.error{
float: none;
color:red;
padding-left: .5em;
vertical-align: top;
}
p{clear: both;}
.submit{
margin-left: 12em;
}
em{
font-weight: bold;
padding-right: 1em;
vertical-align: top;
}
/**/
em { font-weight: bold; padding-right: 1em; vertical-align: top; }
em.error {
background:url(“images/unchecked.gif”) no-repeat 0px 0px;
padding-left: 16px;
}
em.success {
background:url(“images/checked.gif”) no-repeat 0px 0px;
padding-left: 16px;
}
</style>
</head>
<body>
<form method=”get” action=”#” id=”commentForm” class=”cmxForm”>
<fieldset>
<legend>三个简便的阐明带有验证消息评论例子</legend>
<p>
<label for=”cusername”>姓名</label><em>*</em>
<input type=”text” name=”username” size=”25″ id=”cusername” >
</p>
<p>
<label
for=”cemail”>电子邮箱</label><em>*</em>
<input type=”text” name=”email” size=”25″ id=”cemail” >
</p>
<p>
<label for=”curl”>网址</label><em>*</em>
<input type=”text” name=”url” size=”25″ id=”curl” >
</p>
<p>
<label for=”ccomment”>评论</label><em>*</em>
<textarea name=”comment” cols=”22″ id=”ccomment”
></textarea>
</p>
<p>
<label
for=”cvalcode”>验证码</label><em>*</em>
<input type=”text” name=”valcode” size=”25″ value=”” id=”cvalcode”
/>7+9
</p>
<p><input type=”submit” name=”” value=”提交”
class=”submit”></p>
</fieldset>
</form>
<script type=”text/javascript”
src=”../scripts/jquery-1.3.1.js”></script>
<script type=”text/javascript”
src=”../scripts/lib/jquery.validate.js”></script>
<script type=”text/javascript”
src=”../scripts/lib/jquery.validate.messages_cn.js”></script>
<script type=”text/javascript”>
/*(1)$(“#commentForm”).validate()方法中加进rules属性

  1. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “;    
  2. <html xmlns=”;    
  3. <head>    
  4. <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />    
  5. <title>jquery.validate自定义规则的利用格局</title>    
  6. <script src=”jquery.js” type=”text/javascript”></script>    
  7. <script src=”jquery.validate.min.js” type=”text/javascript”></script>    
  8. <script type=”text/javascript” language=”javascript”>    
  9.     
  10. //规则名:buga,value检查评定对像的值    
  11.     $.validator.addMethod(“buga”, function(value) {    
  12.         return value == “buga”;    
  13.     }, ‘Please enter “buga”!’);    
  14. //规则名:chinese,value检查测试对像的值,element检查实验的对像    
  15.     $.validator.addMethod(“chinese”, function(value, element) {    
  16.         var chinese = /^[\u4e00-\u9fa5]+$/;    
  17.         return (chinese.test(value)) || this.optional(element);    
  18.     }, “只可以输入普通话”);    
  19. //规则名:byteRangeLength,value检查评定对像的值,element检查评定的对像,param参数    
  20.     jQuery.validator.addMethod(“byteRangeLength”, function(value, element, param) {    
  21.         var length = value.length;    
  22.         for (var i = 0; i < value.length; i++) {    
  23.             if (value.charCodeAt(i) > 127) {    
  24.                 length++;    
  25.             }    
  26.         }    
  27.         return this.optional(element) || (length >= param[0] && length <= param[1]);    
  28.     }, $.validator.format(“请保管道输送入的值在{0}-{一}个字节之间(三个汉语字算1个字节)”));    
  29.         
  30. $(function(){    
  31.         
  32.         $(“#form1”).validate({    
  33.         rules: {    
  34.             username:{    
  35.                 required:true,    
  36.                 chinese:true,    
  37.                 byteRangeLength:[1,2]    
  38.                 }    
  39.             //username:”buga”    
  40.             //username:”chinese”    
  41.             //username:”byteRangeLength”            
  42.         }    
  43.         });    
  44.         
  45. });    
  46. </script>    
  47. </head>    
  48.     
  49. <body>    
  50.     
  51. <form id=”form1″ name=”form1″ method=”post” action=””>    
  52.   <p>    
  53.     <label for=”username”>用户名:</label>    
  54.     <input type=”text” name=”username” id=”username”/>    
  55.   </p>    
  56.   <p>    
  57.     <input type=”submit” name=”button” id=”button” value=”提交” />    
  58.   </p>    
  59. </form>    
  60.     
  61. </body>    
  62. </html>  

代码详细情形如下:

代码详细情况如下:

(二)通过各样字段的name属性相称验证规则

4858美高梅 14858美高梅 2

4858美高梅 34858美高梅 4

(叁)定义表明规则:例如:required:true,minlength:贰
*/
$(function(){
$(“#commentForm”).validate({
  rules: {
    username:{
      required:true,
      minlength:2
    },
    email:{
      required:true,
      email:true
    },
    url:”url”,
    comment:”required”,
    valcode:
{formula:”7+玖”}//调用注解规则

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <title></title>
 6     <script src="jquery-3.2.1.js"></script>
 7     <script src="jquery-validation-1.17.0/dist/jquery.validate.js"></script>
 8     <script src="jquery.metadata.js"></script>
 9     <script src="jquery-validation-1.17.0/dist/localization/messages_zh.js"></script>
10     <script>
11         $(function () {
12             //$("#addForm").validate({
13             //    rules: {
14             //        username: {
15             //            required: true,
16             //            minlength: 4
17             //        },
18             //        email: {
19             //            required: true,
20             //            email: true
21             //        },
22             //        address: "url",
23             //        content: "required"
24             //    }
25             //});
26             $("#addForm").validate({
27                 rules: {
28                     username: { required: true, minlength: 2 },
29                     email: { required: true, email: true },
30                     address: "url",
31                     content: "required",
32                     cvalcode: { formual: "7+9" }
33                 }
34             });
35         });
36         $.validator.addMethod(
37                 "formual",
38                 function (value, element, param) {
39                     return value == eval(param);
40                 },
41                 '请输入正确的结果'
42             );
43     </script>
44 </head>
45 <body>
46     <form action="#" method="post" id="addForm">
47         <p>
48             姓名:
49             <input type="text" name="username" value=" " />
50         </p>
51         <p>
52             电子邮件:
53             <input type="text" name="email" value=" " />
54         </p>
55         <p>
56             网址:
57             <input type="text" name="address" value=" " />
58         </p>
59         <p>
60             我的评论:
61             <textarea name="content"></textarea>
62         </p>
63         <label for="cvalcode">验证码</label>
64         <input type="text" name="cvalcode" id="cvalcode" value=" " />=7+9
65         <p>
66             <input type="submit" name="tijiao" value="提交" />
67         </p>
68     </form>
69 </body>
70 </html>
 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <title></title>
 6     <script src="jquery-3.2.1.js"></script>
 7     <script src="jquery-validation-1.17.0/dist/jquery.validate.js"></script>
 8     <script src="jquery.metadata.js"></script>
 9     <script src="jquery-validation-1.17.0/dist/localization/messages_zh.js"></script>
10     <script>
11         $(function () {
12             //$("#addForm").validate({
13             //    rules: {
14             //        username: {
15             //            required: true,
16             //            minlength: 4
17             //        },
18             //        email: {
19             //            required: true,
20             //            email: true
21             //        },
22             //        address: "url",
23             //        content: "required"
24             //    }
25             //});
26             $("#addForm").validate({
27                 rules: {
28                     username: { required: true, minlength: 2 },
29                     email: { required: true, email: true },
30                     address: "url",
31                     content: "required",
32                     cvalcode: { formual: "7+9" }
33                 }
34             });
35         });
36         $.validator.addMethod(
37                 "formual",
38                 function (value, element, param) {
39                     return value == eval(param);
40                 },
41                 '请输入正确的结果'
42             );
43     </script>
44 </head>
45 <body>
46     <form action="#" method="post" id="addForm">
47         <p>
48             姓名:
49             <input type="text" name="username" value=" " />
50         </p>
51         <p>
52             电子邮件:
53             <input type="text" name="email" value=" " />
54         </p>
55         <p>
56             网址:
57             <input type="text" name="address" value=" " />
58         </p>
59         <p>
60             我的评论:
61             <textarea name="content"></textarea>
62         </p>
63         <label for="cvalcode">验证码</label>
64         <input type="text" name="cvalcode" id="cvalcode" value=" " />=7+9
65         <p>
66             <input type="submit" name="tijiao" value="提交" />
67         </p>
68     </form>
69 </body>
70 </html>

  },
  messages: {
    username:{
      required:’请输入你的名字’,
      minlength:’请输入至少八个字符’
    },
    email:{
      required:’请输入你的email’,
      email:’请输入正确的邮箱格式’
    },
    url:”请输入正确的网站格式”,
    comment:”请输入评论”
  },
  errorElement:”em”,
//用来创设错误提示新闻标签
  success: function(label){ //验证成功后举行的回调函数
  //label指向上边13分错误提醒音信标签em
  label.text(“”).addClass(‘success’); //清空错误音讯,加上自定义的class
}

View Code

View Code

});
  //自定义3个注脚格局
  $.validator.addMethod(
  ”formula”,//验证措施名
  function(value,element,param){//验证规则
    return value == eval(param);
  },
  ’请输入正确的数学公式总计后的结果’ //验证提示音讯
  )
});
</script>
</body>
</html>

 

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有