JQuery扩展插件Validate—2通过参数设置验证规则

在前面示例中使用的的方法简单方便,但没有完全将js与页面结构完全分离,也就是说js依赖了class,下面通过validate()方法的参数设置验证规则将js与页面结构完全分离,代码如下:
显示源码
<script type="text/javascript">
        $(
function() {
            $(
"#signupForm").validate(
            
            
//在上例中新增的部分
            {
                rules: {
                    txtPassword1: 
"required",  //密码1必填

                    txtPassword2: {    
//密码2的描述多于1项使用对象类型
                        required: true,  //必填,这里可以是一个匿名方法
                        equalTo: "#txtPassword1",  //必须与密码1相等
                        rangelength: [510]    //长度5-10之间
                    },

                    txtEmail: 
"email"   //电子邮箱必须合法
                }

            });
        });
    
</script>

<form id="signupForm" method="get" action="">
    
<fieldset>
        
<legend>用户注册</legend>
        <p>
            
<label for="txtPassword1">
                密码1
</label>
            <input id="txtPassword1" name="txtPassword1" type="password" />
        </p>
        <p>
            
<label for="txtPassword2">
                密码2
</label>
            <input id="txtPassword2" name="txtPassword2" type="password" />
        </p>
        <p>
            
<label for="txtEmail">
                邮箱
</label>
            <input id="txtEmail" name="txtEmail" />
        </p>
        <p>
            
<input type="submit" value="提交" />
        </p>
    </fieldset>
</form>

远行结果:

注意:在ASP.NET中使用这种JS验证方法最好将服务器控件Id替换成客户端Id,如:<%=控件Id.ClientId %>,<%=控件Id.UniqueId>

 

源码下载

posted @ 2011-09-05 17:07  张果  阅读(...)  评论(...编辑  收藏
AmazingCounters.com