jQuery使用方式

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>
    $().ready(function() {
     $("#signupForm").validate();
    });
    <form id="signupForm" method="get" action="">
            <label for="firstname">Firstname</label>
            <input id="firstname" name="firstname" class="required" />
   
            <label for="email">E-Mail</label>
            <input id="email" name="email" class="required email" />
   
             <label for="password">Password</label>
            <input id="password" name="password" type="password" class="{required:true,minlength:5}" />
   
             <label for="confirm_password">确认密码</label>
            <input id="confirm_password" name="confirm_password" type="password" class="{required:true,minlength:5,equalTo:'#password'}" />
   
            <input class="submit" type="submit" value="Submit"/>  
    </form>
 
    使用class="{}"的方式,必须引入包:jquery.metadata.js
    可以使用如下的方法,修改提示内容:
    class="{required:true,minlength:5,messages:{required:'请输入内容'}}"
    在使用equalTo关键字时,后面的内容必须加上引号,如下代码:
    class="{required:true,minlength:5,equalTo:'#password'}"
    另外一个方式,使用关键字:meta(为了元数据使用其他插件你要包装 你的验证规则在他们自己的项目中可以用这个特殊的选项)
    Tell the validation plugin to look inside a validate-property in metadata for validation rules.
 例如:
 meta: "validate"
 <input id="password" name="password" type="password" class="{validate:{required:true,minlength:5}}" />

再有一种方式:
 $.metadata.setType("attr", "validate");
 这样可以使用validate="{required:true}"的方式,或者class="required",但class="{required:true,minlength:5}"将不起作用
 
2.将校验规则写到代码中

$().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="">
            <label for="firstname">Firstname</label>
            <input id="firstname" name="firstname" />
   
            <label for="email">E-Mail</label>
            <input id="email" name="email" />
   
            <label for="password">Password</label>
            <input id="password" name="password" type="password" />
   
            <label for="confirm_password">确认密码</label>
            <input id="confirm_password" name="confirm_password" type="password" />
   
             <input class="submit" type="submit" value="Submit"/>  
    </form>
    
    required:true 必须有值
    required:"#aa:checked"表达式的值为真,则需要验证
    required:function(){}返回为真,表时需要验证
    后边两种常用于,表单中需要同时填或不填的元素

by 雪洁 2011-01-04 15:16:22 6062 views
我来说几句

相关文章