오늘은 양식 유효성 검사에 대해 이야기하겠습니다. 어떤 사람들은 양식 유효성 검사를 수행할 때 정규식을 사용하여 확인하는 것이 매우 번거롭다고 말합니다. 이제 양식 유효성 검사 플러그인인 jquery.validate를 소개하겠습니다. .min.js
jquery와 함께 사용하면 매우 편리합니다. 확인 규칙과 오류 필드만 작성하면 됩니다.
일반적인 확인 규칙은 다음과 같습니다.
(1) 필수:true 올바른 형식으로 날짜를 입력해야 합니다.
(4)dateISO:true 올바른 형식(ISO)으로 날짜를 입력해야 합니다
(5)digits:true 정수를 입력해야 합니다
(6)equalTo:"#pass" 입력 값은 #pass
( 7)maxlength:5 최대 길이가 5
(8)인 문자열을 입력하세요 )minlength:10 최소 길이가 10인 문자열을 입력하세요.
(9)rangelength:[5,10] 입력 길이는 5에서 10 사이여야 합니다.
(10)range:[5,10] 입력 값은 사이여야 합니다. 5 및 10
(11)max:5 입력 값은 5
(12)min:10보다 클 수 없습니다. 입력 값은 10
보다 작을 수 없습니다.
플러그인을 사용하기 전에 jquery 파일과 플러그인을 소개하는 것은 필수입니다.
<span style="font-size: 18px"><script src="jquery-1.9.1.js?1.1.10"></script></span><br><span style="font-size: 18px"><script src="jquery.validate.min.js?1.1.10"></script><br>然后就来看一下html代码<br></span>
<span style="font-size: 18px"><form action="" id="mgForm"> //写表单验证比不缺少的是我们的form标签</span><br><span style="font-size: 18px"> <div> //关于用户名的布局</span><br><span style="font-size: 18px"> <label for="user">username:</label></span><br><span style="font-size: 18px"> <input type="text" name="username" id="user"></span><br><span style="font-size: 18px"> </div></span><br><br><span style="font-size: 18px"> <div>//关于密码的布局</span>
<span style="font-size: 18px"> <label for="pass">password:</label></span><br><span style="font-size: 18px"> <input type="text" name="password" id="pass"></span><br><span style="font-size: 18px"> </div></span><br><span style="font-size: 18px"> <div>//重置密码</span><br><span style="font-size: 18px"> <label for="pass1">form-password:</label></span><br><span style="font-size: 18px"> <input type="text" name="password1" id="pass1"></span><br><span style="font-size: 18px"> </div></span><br><span style="font-size: 18px"> <div>//年龄</span><br><span style="font-size: 18px"> <label for="age">age:</label></span><br><span style="font-size: 18px"> <input type="text" name="age" id="age"></span><br><span style="font-size: 18px"> </div></span><br><span style="font-size: 18px"> <div>//email</span><br><span style="font-size: 18px"> <label for="email">email:</label></span><br><span style="font-size: 18px"> <input type="text" name="email" id="email"></span><br><span style="font-size: 18px"> </div></span><br><span style="font-size: 18px"> <input type="submit" value="提交"> //我们在提交数据时提交的按钮应该为submit类型的</span><br><span style="font-size: 18px"></form><br>接着再来看一下js代码 <br></span>
<span style="font-size: 18px"> $(function () {</span><br><span style="font-size: 18px"> $("#mgForm").validate({</span><br><span style="font-size: 18px"> rules:{//写入文本框中的限制条件</span><br><span style="font-size: 18px"> username:{ //指的是input中name的名字</span><br><span style="font-size: 18px"> required:true,//不能为空</span><br><span style="font-size: 18px"> minlength:6,//最短为6个</span><br><span style="font-size: 18px"> maxlength:10//最长为10个</span><br><span style="font-size: 18px"> },</span><br><span style="font-size: 18px"> age:{</span><br><span style="font-size: 18px">// range:[18,80] //年龄范围为18-80</span><br><span style="font-size: 18px"> required:true, //不能为空</span><br><span style="font-size: 18px"> },</span><br><span style="font-size: 18px"> password:{</span><br><span style="font-size: 18px"> required:true,//必填</span><br><span style="font-size: 18px"> rangelength:[2,6] //长度为2-6</span><br><span style="font-size: 18px"> },</span><br><span style="font-size: 18px"> password1:{</span><br><span style="font-size: 18px"> equalTo:"#pass" //重置密码必须与#pass中的密码保持一致</span><br><span style="font-size: 18px"> },</span><br><span style="font-size: 18px"> email:{</span><br><span style="font-size: 18px"> email:true //email保证格式正确</span><br><span style="font-size: 18px"> }</span><br><span style="font-size: 18px"> },</span><br><span style="font-size: 18px"> messages:{//提示信息</span><br><span style="font-size: 18px"> username:{ //用户名</span><br><span style="font-size: 18px"> required:"*此项必填",</span><br><span style="font-size: 18px"> minlength:"*用户名最小是6位",</span><br><span style="font-size: 18px"> maxlength:"*用户名最大是10位"</span><br><span style="font-size: 18px"> },</span><br><span style="font-size: 18px"> age:{//年龄</span><br><span style="font-size: 18px"> range:"*年龄必须在18-80之间"</span><br><span style="font-size: 18px"> PostCode:"错误"</span><br><span style="font-size: 18px"> },</span><br><span style="font-size: 18px"> password:{//密码</span><br><span style="font-size: 18px"> required:"*必填",</span><br><span style="font-size: 18px"> rangelength:"2-6"</span><br><span style="font-size: 18px"> },</span><br><span style="font-size: 18px"> password1:{//重置密码</span><br><span style="font-size: 18px"> equalTo:"*密码不一致"</span><br><span style="font-size: 18px"> },</span><br><span style="font-size: 18px"> email:{//邮箱格式</span><br><span style="font-size: 18px"> email:"*邮箱格式不正确"</span><br><span style="font-size: 18px"> }</span><br><span style="font-size: 18px"> },</span><br><span style="font-size: 18px"> submitHanfler:function () {//如果全部验证正确就弹出弹窗</span><br><span style="font-size: 18px"> alert("全部通过")</span><br><span style="font-size: 18px"> },</span><br><span style="font-size: 18px"> errorClass:"wrong",//给错误字段添加wrong样式</span><br><span style="font-size: 18px"> ignore:"#pass1",//忽略密码不一</span><br><span style="font-size: 18px"> errorElement:"div",//错误信息单独显示一行</span><br><span style="font-size: 18px"> focusInvalid:true,//提交表单后,未通过验证的表单(第一个或提交之 前获得焦点的未通过验证的表单)会获得焦点 </span><br><span style="font-size: 18px"> focusCleanup:true,// 当未通过验证的元素获得焦点时,并移除错误提示</span><br><span style="font-size: 18px"> highlight:function (element,errorClass) {//在信息错误时会出现一闪的效果</span><br><span style="font-size: 18px"> $(element).addClass(errorClass);</span><br><span style="font-size: 18px"> $(element).fadeOut().fadeIn()</span><br><span style="font-size: 18px"> }</span><br><span style="font-size: 18px"> });</span><br><span style="font-size: 18px"> $.validator.addMethod("PostCode",function () { //此外，我们还可自定义样式</span><br><span style="font-size: 18px"> var reg=/^[0-9]{6}$/;</span><br><span style="font-size: 18px"> return reg.test(value)</span><br><span style="font-size: 18px"> },"邮编输入不正确");</span><br><span style="font-size: 18px"> });</span>今天的表带验证插件你们学会了嘛？
위 내용은 양식 유효성 검사 플러그인---jquery.validate 사용 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
