jQuery使用简单示例 validate 插件

最新推荐文章于 2019-04-16 16:24:26 发布

scjzhong

最新推荐文章于 2019-04-16 16:24:26 发布

阅读量1k

点赞数

本文链接：https://blog.csdn.net/u010320371/article/details/51104783

版权

用户登录

用户名

密码

确认密码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>jQuery Validation 插件</title>
    <link rel="stylesheet" href="style.css"/>
</head>
<body>
<form id="demoForm">
    <fieldset>
        <legend>用户登录</legend>
        <p id="info"></p>

        <p>
            <label for="username">用户名</label>
            <input type="text" id="username" name="username"/>
        </p>

        <p>
            <label for="password">密码</label>
            <input type="password" id="password" name="password"/>
        </p>

        <p>
            <label for="confirm-password">确认密码</label>
            <input type="password" id="confirm-password" name="confirm-password"/>
        </p>

        <p>
            <input type="submit" value="登录"/>
        </p>
    </fieldset>
</form>

<script src="vendor/jquery-1.10.0.js"></script>
<script src="vendor/jquery.validate-1.13.1.js"></script>
<script>
    var validator1;
    $(document).ready(function () {
        validator1 = $("#demoForm").validate({
            debug: true,
            rules: {
                username: {
                    required: true,
                    minlength: 2,
                    maxlength: 10
                },
                password: {
                    required: true,
                    minlength: 2,
                    maxlength: 16
                },
                "confirm-password": {
                    equalTo: "#password"
                }
            },
            messages: {
                username: {
                    required: '请输入用户名',
                    minlength: '用户名不能小于2个字符',
                    maxlength: '用户名不能超过10个字符',
                    remote: '用户名不存在'
                },
                password: {
                    required: '请输入密码',
                    minlength: '密码不能小于2个字符',
                    maxlength: '密码不能超过16个字符'
                },
                "confirm-password": {
                    equalTo: "两次输入密码不一致"
                }

            },

            highlight: function(element, errorClass, validClass) {
                $(element).addClass(errorClass).removeClass(validClass);
                $(element).fadeOut().fadeIn();
            },
            unhighlight: function(element, errorClass, validClass) {
                $(element).removeClass(errorClass).addClass(validClass);
            },
            submitHandler: function (form) {
                console.log($(form).serialize())
            }
        });

        $("#check").click(function () {
            console.log($("#demoForm").valid() ? "填写正确" : "填写不正确");
        });
    });
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>jQuery Validation 插件</title>
    <link rel="stylesheet" href="style.css"/>
    <script src="/Public/js/jquery-1.10.0.js"></script>
	<script src="/Public/js/jquery.validate-1.13.1.js"></script>
</head>
<body>
<form id="demoForm">
    <fieldset>
        <legend>用户登录</legend>
        <p id="info"></p>

        <p>
            <label for="username">用户名</label>
            <input type="text" id="username" name="username"/>
        </p>

        <p>
            <label for="password">密码</label>
            <input type="password" id="password" name="password"/>
        </p>
		
        <p>
            <label for="confirm-password">确认密码</label>
            <input type="password" id="confirm-password" name="confirm-password"/>
        </p>
        
        <p>
            <label for="email">邮箱</label>
            <input type="text" id="email" name="email"/>
        </p>
        
        <p>
            <label for="phone">手机</label>
            <input type="text" id="phone" name="phone"/>
        </p>

        <p>
            <input type="submit" value="登录"/>
        </p>
    </fieldset>
</form>

<script>

	$(document).ready(function(){
		$("#demoForm").validate({
			rules:{
				username:{
					required:true,
					minlength:2,
					maxlength:10,
				},
				password:{
					required:true,
					minlength:2,
					maxlength:16,
				},
				email:{
					required:true,
					email:true,
				},
				phone:{
					required:true,
					rangelength:[11,11],
					number:true
				},
				"confirm-password":{
					equalTo:"#password"
				}
			},
			messages:{
				username:{
					required:'请输入用户名！',
					minlength:'最小为两个字符！',
					maxlength:'最大为十个字符！'
				},
				password:{
					required:'请输入密码！',
					minlength:'最小为两个字符！',
					maxlength:'最大为十六个字符！'
				},
				email:{
					required:'邮箱必填！',
					email:'email格式填写不正确!'
				},
				phone:{
					required:'请输入手机号码！',
					rangelength:'手机号码为11位',
					number:'手机号必须为数字'
					
				},
				'confirm-password':{
					equalTo:'两次输入密码不一致！'
				}
				
			},
			
			submitHandler: function(form){   //表单提交句柄,为一回调函数，带一个参数：form   
                alert("提交表单");   
               
            }, 
		});
	});
</script>


</body>
</html>