Code666 (代码贴、代码片段)

[JavaScript] jquery.validate.js 验证表单字段 用户名 邮箱...... →→→→→进入此内容的聊天室

来自 , 2019-07-29, 写在 JavaScript, 查看 100 次.
URL http://www.code666.cn/view/65ded535
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3.  
  4. <html xmlns="http://www.w3.org/1999/xhtml">
  5. <head>
  6.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  7.  
  8.   <title></title>
  9.   <script src="../../scripts/jquery-1.3.1.js" type="text/javascript">
  10. </script>
  11.   <script src="lib/jquery.validate.js" type="text/javascript">
  12. </script>
  13.   <style type="text/css">
  14. /*<![CDATA[*/
  15.   * { font-family: Verdana; font-size: 96%; }
  16.   label { width: 10em; float: left; }
  17.   label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
  18.   p { clear: both; }
  19.   .submit { margin-left: 12em; }
  20.  
  21.   em { font-weight: bold; padding-right: 1em; vertical-align: top; }
  22.   em.error {
  23.   background:url("images/unchecked.gif") no-repeat 0px 0px;
  24.   padding-left: 16px;
  25.   }
  26.   em.success {
  27.   background:url("images/checked.gif") no-repeat 0px 0px;
  28.   padding-left: 16px;
  29.   }
  30.  
  31.   /*]]>*/
  32.   </style>
  33.   <script type="text/javascript">
  34. //<![CDATA[
  35.   $(document).ready(function(){
  36.  
  37.         //自定义一个验证方法
  38.         $.validator.addMethod(
  39.         "formula", //验证方法名称
  40.         function(value, element, param) {//验证规则
  41.                 return value == eval(param);
  42.         },
  43.         '请正确输入数学公式计算后的结果'//验证提示信息
  44.         );
  45.  
  46.         $("#commentForm").validate({
  47.                 rules: {
  48.                         username: {
  49.                                 required: true,
  50.                                 minlength: 2
  51.                         },
  52.                         email: {
  53.                                 required: true,
  54.                                 email: true
  55.                         },
  56.                         url:"url",
  57.                         comment: "required",
  58.                         valcode: {
  59.                                 formula: "7+9"  
  60.                         }
  61.                 },
  62.                
  63.                 messages: {
  64.                         username: {
  65.                                 required: '请输入姓名',
  66.                                 minlength: '请至少输入两个字符'
  67.                         },
  68.                         email: {
  69.                                 required: '请输入电子邮件',
  70.                                 email: '请检查电子邮件的格式'
  71.                         },
  72.                         url: '请检查网址的格式',
  73.                         comment: '请输入您的评论'
  74.                 },      
  75.                
  76.                 errorElement: "em",                             //用来创建错误提示信息标签
  77.                 success: function(label) {                      //验证成功后的执行的回调函数
  78.                         //label指向上面那个错误提示信息标签em
  79.                         label.text(" ")                         //清空错误提示消息
  80.                                 .addClass("success");   //加上自定义的success类
  81.                 }
  82.  
  83.  
  84.           });
  85.  
  86.   });
  87.   //]]>
  88.   </script>
  89. </head>
  90.  
  91. <body>
  92.   <form class="cmxform" id="commentForm" method="get" action="">
  93.     <fieldset>
  94.       <legend>一个简单的验证带验证提示的评论例子</legend>
  95.  
  96.       <p><label for="cusername">姓名</label> <em>*</em><input id="cusername" name="username" size="25" /></p>
  97.  
  98.       <p><label for="cemail">电子邮件</label> <em>*</em><input id="cemail" name="email" size="25" /></p>
  99.  
  100.       <p><label for="curl">网址</label> <input id="curl" name="url" size="25" value="" /></p>
  101.  
  102.       <p><label for="ccomment">你的评论</label> <em>*</em>
  103.       <textarea id="ccomment" name="comment" cols="22">
  104. </textarea></p>
  105.  
  106.       <p><label for="cvalcode">验证码</label> <input id="cvalcode" name="valcode" size="25" value="" />=7+9</p>
  107.  
  108.       <p><input class="submit" type="submit" value="提交" /></p>
  109.     </fieldset>
  110.   </form>
  111. </body>
  112. </html>
  113.  

回复 "jquery.validate.js 验证表单字段 用户名 邮箱......"

这儿你可以回复上面这条便签

=7+9

captcha

贴代码片段 - Code666