jQuery Validate 表单验证

最新推荐文章于 2024-03-14 07:00:00 发布

原创最新推荐文章于 2024-03-14 07:00:00 发布 · 496 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

javaScript 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了如何使用JavaScript实现表单验证，确保输入内容合法后才允许表单提交，包括手机号、短信验证码、昵称、密码等字段的验证规则及错误提示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

js表单验证，当文本框失去焦点的时候，会对文本框进行验证，当提交表单的时候，如果所有表单内容添写合法，则提交表单，否则提示输入错误。

效果图如下：

首先需要导入js类库：

创建表单：

<form method="post" class="clearfix" id="form">
       <div class="reg_name reg_name_position">
		<label class="label_width">手机号：</label>
		<input type="text" value="请输入手机号" class="reg_tel" name="account" id="account" />
		<span class="red">*</span>
	</div>
	<input type="button" class="reg_btn_tel" value="发送验证码" name="reg_btn_tel" />
	<div class="reg_name">
		<label class="label_width">短信验证码：</label>
		<input type="text" value="请输入短信验证码" class="reg_tel" name="phonepwd" />
		<span class="red">*</span>
	</div>
	<div class="reg_name">
		<label class="label_width">昵称：</label>
	        <input type="text" value="昵称" class="reg_tel" name="nick" />
		<span class="red">*</span>
	</div>
	<div class="reg_name">
		<label class="label_width">密码：</label>
		<input type="text" value="密码" class="reg_tel"  name="password" />
		<span class="red">*</span>
	</div>
	<div class="reg_name">
		<label class="label_width">确认密码：</label>
		<input type="text" value="确认密码" class="reg_tel" name="pwd" />
		<span class="red">*</span>
	</div>
	<div class="reg_name reg_name1">
		<input type="checkbox" class="reg_check" name="reg_check" />
		<span>我已阅读并同意运动世界<a href="javascript:void(0)">服务协议</a></span>
	</div>
	<div class="reg_name now_reg1">
		<input type="submit" value="立即注册" class="now_reg" />
	</div>
</form>

验证代码：

<script type="text/javascript">
$(function(){
	var validate = $("#form").validate({
		debug: true, //调试模式取消submit的默认提交功能
		focusInvalid: true, //当为false时，验证无效时，没有焦点响应 
		onkeyup: false,
		/* submitHandler: function(form){   //表单提交句柄,为一回调函数，带一个参数：form
			alert("提交表单");
			form.submit();   //提交表单
		}, */
		
	    rules:{
	    	account: {
				required: true,
				number:true,
				minlength: 10,
				maxlength:14
			},
			password:{
				required:true,
				minlength:8,
				maxlength:20
			},
			pwd:{
				required:true,
				minlength:8,
				maxlength:20,
				equalTo: "#password"
			},
			nick:{
				required:true,
				minlength:8,
				maxlength:20
			},
			phonepwd:{
				required: true,
				number:true,
				minlength: 4,
				maxlength:8
			},
			reg_check:"required"
	    },
	    messages: {
	    	account:{
				required: "请输入您的手机号码！！",
				number: "请正确输入您的手机号码！！",
				minlength: "您的手机号码格式不正确！！",
				maxlength: "您的手机号码格式不正确！！"
			},
			password:{
				required:"密码不能为空！！",
				minlength:"密码不能少于8个字符！！",
				maxlength:"密码不能大于20个字符！！"
			},
			pwd:{
				required:"确认密码不能为空！！",
				minlength:"确认密码不能少于8个字符！！",
				maxlength:"确认密码不能大于20个字符！！",
				equalTo: "两次输入的密码不一致！！"
			},
			nick:{
				required:true,
				minlength:"昵称不能少于4个字符！！",
				maxlength:"昵称不能大于20个字符！！"
			},
			phonepwd:{
				required: "请正确输入手机验证码！！",
				number:"请正确输入手机验证码！！",
				minlength: "请正确输入手机验证码！！",
				maxlength:"请正确输入手机验证码！！"
			},
			reg_check:"请确认同意服务协议！！"
	    },
	  	//设置错误信息存放标签
	    errorElement: "em",
	  	//指定错误信息位置
	    errorPlacement: function (error, element) {
            if (element.is(':radio') || element.is(':checkbox')) {
                var eid = element.attr('name');
                error.appendTo(element.parent());
            } else {
            	error.insertAfter(element);
            }
        }
	});
});
</script>