深入学习jQuery Validate表单验证（二）

前端技术 2023/09/04 JavaScript

本文实例介绍了jQuery Validate表单验证，分享给大家供大家参考，具体内容如下

一、添加一个另外一个插件jquery.validate.messages_cn.js。
改变默认提示方式。

/*
 * Translated default messages for the jQuery validation plugin.
 * Language: CN
 * Author: Fayland Lam <fayland at gmail dot com>
 */
jQuery.extend(jQuery.validator.messages, {
    required: \"必选字段\",
    remote: \"请修正该字段\",
    email: \"请输入正确格式的电子邮件\",
    url: \"请输入合法的网址\",
    date: \"请输入合法的日期\",
    dateISO: \"请输入合法的日期 (ISO).\",
    number: \"请输入合法的数字\",
    digits: \"只能输入整数\",
    creditcard: \"请输入合法的信用卡号\",
    equalTo: \"请再次输入相同的值\",
    accept: \"请输入拥有合法后缀名的字符串\",
    maxlength: jQuery.format(\"请输入一个长度最多是 {0} 的字符串\"),
    minlength: jQuery.format(\"请输入一个长度最少是 {0} 的字符串\"),
    rangelength: jQuery.format(\"请输入一个长度介于 {0} 和 {1} 之间的字符串\"),
    range: jQuery.format(\"请输入一个介于 {0} 和 {1} 之间的值\"),
    max: jQuery.format(\"请输入一个最大为 {0} 的值\"),
    min: jQuery.format(\"请输入一个最小为 {0} 的值\")
});

二、jQuery表单验证插件----通过name属性来关联字段来验证，将校验规则写到 js 代码中。

<html>
<head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
 <title>jQuery表单验证插件----通过name属性来关联字段来验证</title>
 <script src=\"../../scripts/jquery-1.3.1.js\" type=\"text/javascript\"></script>
 <script src=\"lib/jquery.validate.js\" type=\"text/javascript\"></script>
 <script src=\"lib/jquery.validate.messages_cn.js\" type=\"text/javascript\"></script>
 
<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; }
</style>

 <script type=\"text/javascript\">
 $(document).ready(function(){

  $(\"#commentForm\").validate({
    rules: {
      username: {
        required: true,
        minlength: 2
      },
      email: {
        required: true,
        email: true
      },
      url:\"url\",
      comment: \"required\"
    }
   });

 });
 </script>
 
</head>
<body>
 

 <form class=\"cmxform\" id=\"commentForm\" method=\"get\" action=\"\">
 <fieldset>
  <legend>jQuery表单验证插件----通过name属性来关联字段来验证</legend>
  <p>
   <label for=\"cusername\">姓名</label>
   <em>*</em><input id=\"cusername\" name=\"username\" size=\"25\" />
  </p>
  <p>
   <label for=\"cemail\">电子邮件</label>
   <em>*</em><input id=\"cemail\" name=\"email\" size=\"25\" />
  </p>
  <p>
   <label for=\"curl\">网址</label>
   <em> </em><input id=\"curl\" name=\"url\" size=\"25\" value=\"\" />
  </p>
  <p>
   <label for=\"ccomment\">你的评论</label>
   <em>*</em><textarea id=\"ccomment\" name=\"comment\" cols=\"22\"></textarea>
  </p>
  <p>
   <input class=\"submit\" type=\"submit\" value=\"提交\"/>
  </p>
 </fieldset>
 </form>
 
</body>
</html>

以上就是本文的全部内容，希望对大家学习jQuery Validate表单验证有所帮助。

本文地址：https://www.stayed.cn/item/9124

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案