jquery.validate form 基本使用

最新推荐文章于 2024-01-26 10:05:23 发布

wateryi

最新推荐文章于 2024-01-26 10:05:23 发布

阅读量1.1k

点赞数

分类专栏： js html

js 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

html

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
    <link href="css/css.css" rel="stylesheet" />
    <script src="js/jquery-1.10.2.js"></script>
    <script src="js/jquery.validate.js"></script>
    <script type="text/javascript">
        $(function(){
            var validate = $("#myform").validate({
                debug: true, //调试模式取消submit的默认提交功能
                //errorClass: "label.error", //默认为错误的样式类为：error
                focusInvalid: false, //当为false时，验证无效时，没有焦点响应
                onkeyup: false,
                submitHandler: function(form){   //表单提交句柄,为一回调函数，带一个参数：form
                    alert("提交表单");
                    form.submit();   //提交表单
                },

                rules:{
                    myname:{
                        required:true
                    },
                    email:{
                        required:true,
                        email:true
                    },
                    password:{
                        required:true,
                        rangelength:[3,10]
                    },
                    confirm_password:{
                        equalTo:"#password"
                    }
                },
                messages:{
                    myname:{
                        required:"必填"
                    },
                    email:{
                        required:"必填",
                        email:"E-Mail格式不正确"
                    },
                    password:{
                        required: "不能为空",
                        rangelength: $.format("密码最小长度:{0}, 最大长度:{1}。")
                    },
                    confirm_password:{
                        equalTo:"两次密码输入不一致"
                    }
                }

            });

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

    <form id="myform" method="post" action="">
        <p>
            <label for="myname">用户名：</label>
            <!-- id和name最好同时写上 -->
            <input id="myname" name="myname" />
        </p>
        <p>
            <label for="email">E-Mail：</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>


</body>
</html>