jQuery Validate(二)使用方式

1、将校验规则写到控件中

<script src="../js/jquery.js" type="text/javascript"></script>
<script src="../js/jquery.validate.js" type="text/javascript"></script>
<script src="../js/jquery.metadata.js" type="text/javascript"></script>
<script>
    $(function() {
     $("#signupForm").validate();
    });
</script>

<form id="signupForm" method="get" action="">
    <p>
        <label for="firstname">名称</label>
        <input id="firstname" name="firstname" class="required" />
    </p>
 <p>
  <label for="email">邮箱</label>
  <input id="email" name="email" class="required email" />
 </p>
 <p>
  <label for="password">密码</label>
  <input id="password" name="password" type="password" class="{required:true,minlength:5}" />
 </p>
 <p>
  <label for="confirm_password">确认密码</label>
  <input id="confirm_password" name="confirm_password" type="password" class="{required:true,minlength:5,equalTo:'#password'}" />
 </p>
    <p>
        <input class="submit" type="submit" value="保存"/>
    </p></form>

使用 class="{}" 的方式,必须引入包:jquery.metadata.js。

可以使用如下的方法,修改提示内容:

class="{required:true,minlength:5,messages:{required:'此处不能为空哦'}}"

在使用 equalTo 关键字时,后面的内容必须加上引号,代码如下所示:

class="{required:true,minlength:5,equalTo:'#password'}"

2,将校验规则写到 js 代码中

$().ready(function() {
 $("#signupForm").validate({
        rules: {
   firstname: "required",
   email: {
    required: true,
    email: true
   },
   password: {
    required: true,
    minlength: 5
   },
   confirm_password: {
    required: true,
    minlength: 5,
    equalTo: "#password"
   }
  },
        messages: {
   firstname: "请输入姓名",
   email: {
    required: "请输入Email地址",
    email: "请输入正确的email地址"
   },
   password: {
    required: "请输入密码",
    minlength: jQuery.format("密码不能小于{0}个字 符")
   },
   confirm_password: {
    required: "请输入确认密码",
    minlength: "确认密码不能小于5个字符",
    equalTo: "两次输入密码不一致不一致"
   }
  }
    });});

messages 处,如果某个控件没有 message,将调用默认的信息

<form id="signupForm" method="get" action="">
    <p>
        <label for="firstname">Firstname</label>
        <input id="firstname" name="firstname" />
    </p>
 <p>
  <label for="email">邮箱</label>
  <input id="email" name="email" />
 </p>
 <p>
  <label for="password">密码</label>
  <input id="password" name="password" type="password" />
 </p>
 <p>
  <label for="confirm_password">确认密码</label>
  <input id="confirm_password" name="confirm_password" type="password" />
 </p>
    <p>
        <input class="submit" type="submit" value="保存"/>
    </p></form>

required:true 必须有值。
required:"#aa:checked" 表达式的值为真,则需要验证。
required:function(){} 返回为真,表示需要验证。

后边两种常用于,表单中需要同时填或不填的元素。


版权及转载说明

本站原创、转载文章欢迎任何形式的转载,但请务必注明出处,尊重他人劳动共创开源社区

本站转载文章版权归原作者所有,如发现本站文章涉嫌侵权请点击「联系我们」反馈,本站将立即给予删除

转载请注明:文章转载自:全分享社区 「http://www.aweb.cc

本文标题: jQuery Validate(二)使用方式

本文地址:http://www.aweb.cc/article/detail/id/354.html

表单插件之 jQuery Valida <<上一篇 下一篇>>使用升级版的 Bootstrap typ