jquery validate表单验证插件制作注册表单验证提交

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jquery validate表单验证插件制作注册表单验证提交</title>
    <meta name="description" content="jquery validate表单验证插件制作用户注册页面表单提交验证,用户名、手机、密码、邮箱等表单验证。通过这款validate表单验证插件能制作多种表单提交验证。" />
    <script src="Scripts/jquery-1.7.1.js"></script>
    <script src="Scripts/jquery.validate.js"></script>
    <!--<script src="Scripts/jquery.metadata.2.1.js"></script>-->
    <script type="text/javascript">
        $(document).ready(function () {
            $("#signupForm").validate({
                rules: {
                    "firstname": {
                        required: true,
                        rangelength: [4, 20]
                    },
                    "email": {
                        required: true,
                        email: true
                    },
                    "password": {
                        required: true,
                        rangelength: [4, 20]
                    },
                    "confirm_password": {
                        required: true,
                        equalTo: "#password"
                    }
                },
                messages: {
                    "firstname": {
                        required: "请输入用户名",
                        rangelength: "请输入4-20位字母开头的字母或数字和下划线"
                    },
                    "email": {
                        required: "请输入邮箱地址",
                        email: "请输入正确的email地址"
                    },
                    "password": {
                        required: "请输入密码",
                        rangelength: "请输入4-20位字母开头的字母或数字和下划线"
                    },
                    "confirm_password": {
                        required: "请再次输入密码",
                        equalTo: "两次输入密码不一致",
                    }
                }
            });
        });
    </script>
</head>
<body>
    <form id="signupForm" method="post" action="">
        <table width="100%">
            <tr>
                <td class="tdcon">用户名:</td>
                <td>
                    <input type='text' name="firstname" id="firstname" value="" />
                    <div class="tipinfo"></div>
                </td>
            </tr>
            <tr>
                <td class="tdcon">邮箱:</td>
                <td>
                    <input type='text' name="email" id="email" value="" />
                    <div class="tipinfo"></div>
                </td>
            </tr>
            <tr>
                <td class="tdcon">密码:</td>
                <td>
                    <input type='text' name="password" id="password" value="" />
                    <div class="tipinfo"></div>
                </td>
            </tr>
            <tr>
                <td class="tdcon">确认密码:</td>
                <td>
                    <input type='text' name="confirm_password" id="confirm_password" value="" />
                    <div class="tipinfo"></div>
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <button name="Submit" type="submit">同意以下服务条款并注册</button></td>
            </tr>
        </table>
    </form>
</body>
</html>
上面的代码不能使用jquery.metadata.js,

如果用的话就可以在class属性里面设置设置规则 如:

class="{required:true,minlength:5,messages:{required:'请输入内容'}}"
class="{required:true,minlength:5,equalTo:'#password'}"

使用jquery.metadata.js的例子如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jquery.metadata.js</title>
    <script src="Scripts/jquery-1.7.1.js"></script>
    <script src="Scripts/jquery.validate.js"></script>
    <script src="Scripts/jquery.metadata.2.1.js"></script>
    <script type="text/javascript">

        $(document).ready(function () {
            jQuery.validator.addMethod("phone", function (val, element) {
                var tel = /^(\d{3,4}-?)?\d{7,9}$/g;
                return this.optional(element) || (tel.test(val));
            }, "请正确填写您的电话号码");

            validator = $('#jqueryForm').validate(/*{  
            focusInvalid: true,  
            onkeyup: false,  
               errorPlacement: function(error, element) {
                if ( element.is(":radio") )
                    error.appendTo( element.parent().next().next() );
                else if ( element.is(":checkbox") )
                    error.appendTo ( element.next() );
                else
                    error.appendTo( element.parent().next() );
            }, 
            highlight: function(element, errorClass) {  //针对验证的表单设置高亮  
                $(element).addClass(errorClass);  
            },  
            success: function(label) {    
                  label.html(" ").addClass("checked");      
            },  
            rules:{
                phone:{
                    required:true,
                    phone:true
                }
            } 
        }*/);
            /*$("#btn").click(function(){  
                validator.resetForm();  
            }); */
        });
    </script>

</head>

<body>

    <form id="jqueryForm" name="jqueryForm" method="post" action="">

        <table cellspacing="0" cellpadding="0">
            <tr>
                <td>用户名</td>
                <td>
                    <input type="text" name="username" class="{required:true,minlength:6,maxlength:10}" /></td>
                <td></td>
            </tr>
            <tr>
                <td>密码</td>
                <td>
                    <input type="password" name="password" id="password" class="{required:true,minlength:6,maxlength:10}" /></td>
                <td></td>
            </tr>
            <tr>
                <td>确认密码</td>
                <td>
                    <input type="password" name="repass" class="{required:true,minlength:6,maxlength:10,equalTo:'#password'}" /></td>
                <td></td>
            </tr>
            <tr>
                <td>手机号码</td>
                <td>
                    <input type="text" name="phone" id="phone" class="{required:true,phone:true}" /></td>
                <td></td>
            </tr>
            <tr>
                <td>邮箱</td>
                <td>
                    <input type="text" name="email" class="{required:true,minlength:6,maxlength:50,email:true}" /></td>
                <td></td>
            </tr>
            <tr>
                <td>
                    <input type="submit" id="btn" value="提交" />
                    <input type="reset" value="重置" /></td>
            </tr>
        </table>
    </form>
</body>
</html>


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章