집 > 기사 > 웹 프론트엔드 > jquery.validate 양식 유효성 검사 플러그인 소개

jquery.validate 양식 유효성 검사 플러그인 소개

小云云원래의: 2018-01-06 11:27:401708검색

이 글은 주로 jquery.validate 양식 확인 플러그인의 사용법을 소개합니다. 관심 있는 친구들이 참고하면 도움이 될 것입니다.

오늘은 양식 유효성 검사에 대해 이야기하겠습니다. 어떤 사람들은 양식 유효성 검사를 수행할 때 정규식을 사용하는 것이 매우 번거롭다고 말합니다. 이제 양식 유효성 검사 플러그인인 jquery.validate.min.js를 소개하겠습니다. jquery와 함께 사용하면 매우 편리합니다. 유효성 검사 규칙과 오류 필드만 작성하면 됩니다.

일반적인 확인 규칙은 다음과 같습니다.

(1)필수:true 사용 사용 사용 사용 ‐ ’ ‐ ‐ ‐ ‐ ‐‐‐ 및

날짜
(4)dateISO:true를 입력해야 합니다. 올바른 형식의 날짜(ISO)
(5)digits:true 정수를 입력해야 합니다.
(6)equalTo:"#pass" 입력 값은 #pass와 동일해야 합니다.
(7)maxlength: 5 문자열 최대 5개의 입력 길이 (8) 최소 길이: 10개의 최소 입력 길이가 있는 문자열 10 (9) Ranglength: [5,10] 입력 길이는 5에서 10 사이여야 합니다. (10) 범위:[5,10] 입력 값은 5와 10 사이여야 합니다
(11)max:5 입력 값은 5
(12)min:10보다 클 수 없습니다. 입력 값은 10

보다 작을 수 없습니다. 그런 다음 프롬프트 필드를 작성하세요. 영어 프롬프트 필드가 있으므로 작성할 필요는 없습니다. 다음 코드를 살펴보겠습니다.

플러그인을 사용하기 전에 jquery 파일과 플러그인을 소개하는 것은 필수입니다

<script src="jquery-1.9.1.js"></script>
<script src="jquery.validate.min.js"></script>

그럼 html코드를 살펴보겠습니다

<form action="" id="mgForm"> //写表单验证比不缺少的是我们的form标签
  <p> //关于用户名的布局
    <label for="user">username:</label>
    <input type="text" name="username" id="user">
  </p>

  <p>//关于密码的布局
    <label for="pass">password:</label>
    <input type="text" name="password" id="pass">
  </p>
  <p>//重置密码
    <label for="pass1">form-password:</label>
    <input type="text" name="password1" id="pass1">
  </p>
  <p>//年龄
    <label for="age">age:</label>
    <input type="text" name="age" id="age">
  </p>
  <p>//email
    <label for="email">email:</label>
    <input type="text" name="email" id="email">
  </p>
  <input type="submit" value="提交"> //我们在提交数据时提交的按钮应该为submit类型的
</form>

그럼 js코드를 살펴보겠습니다

   $(function () {
      $("#mgForm").validate({
        rules:{//写入文本框中的限制条件
          username:{ //指的是input中name的名字
            required:true,//不能为空
            minlength:6,//最短为6个
            maxlength:10//最长为10个
          },
          age:{
          //  range:[18,80] //年龄范围为18-80
            required:true, //不能为空
          },
          password:{
            required:true,//必填
            rangelength:[2,6] //长度为2-6
          },
          password1:{
            equalTo:"#pass" //重置密码必须与#pass中的密码保持一致
          },
          email:{
            email:true //email保证格式正确
          }
        },
        messages:{//提示信息
          username:{ //用户名
            required:"*此项必填",
            minlength:"*用户名最小是6位",
            maxlength:"*用户名最大是10位"
          },
          age:{//年龄
            range:"*年龄必须在18-80之间"
            PostCode:"错误"
          },
          password:{//密码
            required:"*必填",
            rangelength:"2-6"
          },
          password1:{//重置密码
            equalTo:"*密码不一致"
          },
          email:{//邮箱格式
            email:"*邮箱格式不正确"
          }
        },
        submitHanfler:function () {//如果全部验证正确就弹出弹窗
          alert("全部通过")
        },
        errorClass:"wrong",//给错误字段添加wrong样式
        ignore:"#pass1",//忽略密码不一
        errorElement:"p",//错误信息单独显示一行
        focusInvalid:true,//提交表单后,未通过验证的表单(第一个或提交之 前获得焦点的未通过验证的表单)会获得焦点 
        focusCleanup:true,// 当未通过验证的元素获得焦点时,并移除错误提示
        highlight:function (element,errorClass) {//在信息错误时会出现一闪的效果
          $(element).addClass(errorClass);
          $(element).fadeOut().fadeIn()
        }
      });
        $.validator.addMethod("PostCode",function () { //此外，我们还可自定义样式
          var reg=/^[0-9]{6}$/;
          return reg.test(value)
        },"邮编输入不正确");
      });

오늘의 스트랩 확인 플러그인을 배우셨나요?

jquery.validate 양식 유효성 검사 플러그인 소개

관련 기사