유효성 검사_jquery 형식의 jquery 구현에 대한 간단한 예제 데모

이 문서의 예에서는 양식 유효성 검사 코드의 jquery 구현을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.
실행 중인 효과의 스크린샷은 다음과 같습니다.

구체적인 코드는 다음과 같습니다.

플러그인으로 직접 이동하여 코드를 구현하는 것이 더 쉽습니다.

/*
描述：基于jquery的表单验证插件。
*/

(function ($) {
  $.fn.checkForm = function (options) {
    var root = this; //将当前应用对象存入root

    var isok = false; //控制表单提交的开关

    var pwd1; //密码存储

    var defaults = {
      //图片路径
      img_error: "img/error.gif",
      img_success: "img/success.gif",

      //提示信息
      tips_success: '', //验证成功时的提示信息，默认为空
      tips_required: '不能为空',
      tips_email: '邮箱地址格式有误',
      tips_num: '请填写数字',
      tips_chinese: '请填写中文',
      tips_mobile: '手机号码格式有误',
      tips_idcard: '身份证号码格式有误',
      tips_pwdequal: '两次密码不一致',

      //正则
      reg_email: /^\w+\@[a-zA-Z0-9]+\.[a-zA-Z]{2,4}$/i, //验证邮箱
      reg_num: /^\d+$/,                 //验证数字
      reg_chinese: /^[\u4E00-\u9FA5]+$/,         //验证中文
      reg_mobile: /^1[3458]{1}[0-9]{9}$/,        //验证手机
      reg_idcard: /^\d{14}\d{3}?\w$/           //验证身份证
    };

    //不为空则合并参数
    if(options)
      $.extend(defaults, options);

    //获取（文本框，密码框，多行文本框），当失去焦点时，对其进行数据验证
    $(":text,:password,textarea", root).each(function () {
      $(this).blur(function () {
        var _validate = $(this).attr("check"); //获取check属性的值
        if (_validate) {
          var arr = _validate.split(' '); //用空格将其拆分成数组
          for (var i = 0; i < arr.length; i++) {
            //逐个进行验证，不通过跳出返回false,通过则继续
            if (!check($(this), arr[i], $(this).val()))
              return false;
            else
              continue;
          }
        }
      })
    })

    //表单提交时执行验证,与上面的方法基本相同，只不过是在表单提交时触发
    function _onSubmit() {
      isok = true;
      $(":text,:password,textarea", root).each(function () {
        var _validate = $(this).attr("check");
        if (_validate) {
          var arr = _validate.split(' ');
          for (var i = 0; i < arr.length; i++) {
            if (!check($(this), arr[i], $(this).val())) {
              isok = false; //验证不通过阻止表单提交，开关false
              return; //跳出
            }
          }
        }
      });
    }

    //判断当前对象是否为表单，如果是表单，则提交时要进行验证
    if (root.is("form")) {
      root.submit(function () {
        _onSubmit();
        return isok;
      })
    }


    //验证方法
    var check = function (obj, _match, _val) {
　　　　　　　//根据验证情况，显示相应提示信息，返回相应的值
      switch (_match) {
        case 'required':
          return _val &#63; showMsg(obj, defaults.tips_success, true) : showMsg(obj, defaults.tips_required, false);
        case 'email':
          return chk(_val, defaults.reg_email) &#63; showMsg(obj, defaults.tips_success, true) : showMsg(obj, defaults.tips_email, false);
        case 'num':
          return chk(_val, defaults.reg_num) &#63; showMsg(obj, defaults.tips_success, true) : showMsg(obj, defaults.tips_num, false);
        case 'chinese':
          return chk(_val, defaults.reg_chinese) &#63; showMsg(obj, defaults.tips_success, true) : showMsg(obj, defaults.tips_chinese, false);
        case 'mobile':
          return chk(_val, defaults.reg_mobile) &#63; showMsg(obj, defaults.tips_success, true) : showMsg(obj, defaults.tips_mobile, false);
        case 'idcard':
          return chk(_val, defaults.reg_idcard) &#63; showMsg(obj, defaults.tips_success, true) : showMsg(obj, defaults.tips_idcard, false);
        case 'pwd1':
          pwd1 = _val; //实时获取存储pwd1值
          return true;
        case 'pwd2':
          return pwdEqual(_val, pwd1) &#63; showMsg(obj, defaults.tips_success, true) : showMsg(obj, defaults.tips_pwdequal, false);
        default:
          return true;
      }
    }


    //判断两次密码是否一致(返回bool值)
    var pwdEqual = function(val1, val2) {
      return val1 == val2 &#63; true : false;
    }


    //正则匹配(返回bool值)
    var chk = function (str, reg) {
      return reg.test(str);
    }

    //显示信息
    var showMsg = function (obj, msg, mark) {
      $(obj).next("#errormsg").remove();//先清除
      var _html = "<span id='errormsg' style='font-size:13px;color:gray;background:url(" + defaults.img_error + ") no-repeat 0 -1px;padding-left:20px;margin-left:5px;'>" + msg + "</span>";
      if (mark)
        _html = "<span id='errormsg' style='font-size:13px;color:gray;background:url(" + defaults.img_success + ") no-repeat 0 -1px;padding-left:20px;margin-left:5px;'>" + msg + "</span>";
      $(obj).after(_html);//再添加
      return mark;
    }
  }
})(jQuery);

​

먼저 구현 원칙에 대해 이야기해 보겠습니다:

먼저 규칙적인 규칙과 그에 따른 프롬프트 정보를 정의하고,

사용자 정의 확인 속성을 추가하세요.

그런 다음 check 속성의 값을 가져오고 여러 값을 공백으로 구분합니다. Split()을 사용하여 배열로 분할하고 check() 메서드를 하나씩 호출하여 확인합니다.

그러면 표시되는 정보는 검증의 반환 값에 따라 결정됩니다.

여기에는 두 가지 특별한 확인이 있습니다.

1. 비어 있는지 확인(필수)

2. 두 비밀번호가 일치합니까(pwd2)

이 두 가지 모두 정규식을 전혀 사용하지 않기 때문에 정규식을 사용하지 않습니다. 두 비밀번호가 일치하는지, 별도의 메소드 pwdEqual()을 작성했습니다.

플러그인에는 몇 가지 확인 규칙만 작성했습니다. 충분하지 않으면 직접 확장하여 추가할 수 있습니다.

확장에는 3단계만 필요합니다.

1. 정규식을 추가합니다.

2. 해당 프롬프트 정보를 추가합니다.

3. check() 메소드에 해당 케이스 처리 추가

플러그인 사용 지침:

1. 양식에서 확인해야 하는 텍스트 상자, 비밀번호 상자 및 여러 줄 텍스트 상자에 사용자 정의 확인 속성을 추가합니다.

2. 다중 형식 확인은 공백으로 구분됩니다. 예: (필수 필드와 이메일을 동시에 확인): check="required email"

3. 두 비밀번호가 일치하는지 확인하려면 아래와 같이 pwd1과 pwd2를 함께 사용하세요.

pwd1은 처음 입력한 값을 저장하고, pwd2는 두 번째 입력한 값을 저장합니다. pwd1만 사용하면 괜찮지만, pwd2만 사용하면 인증이 절대 통과되지 않습니다.

DEMO 샘플 코드는 다음과 같습니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>表单验证插件</title>
</head>
<body>
  <form id="myform" method="post" action="success.html">
    <ul>
      <li>
      邮箱：<input type="text" name="email" check="required email" />
      </li>
      <li>
      密码：<input type="password" check="required pwd1" />
      </li>
      <li>
      确认密码：<input type="password" check="required pwd2" />
      </li>
      <li>
      手机：<input type="text" name="num" check="required mobile" />
      </li>
      <li>
      数字：<input type="text" name="num" check="required num" />
      </li>
      <li>
      地址：<textarea cols="5" rows="5" check="required"></textarea>
      </li>
      <li>
      不加check验证的文本框：<input type="text" name="num" />
      </li>
    </ul>
    <input type="submit" value="提交" />
  </form>
  <script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
  <script src="js/jquery.similar.checkForm.js" type="text/javascript"></script>
  <script type="text/javascript">
    $("#myform").checkForm();
  </script>
</body>
</html>

샘플 효과 사진:

샘플 코드가 성공적으로 제출되면 Success.html 페이지로 이동하므로, Success.html을 직접 작성해야 합니다.

단, 한번의 인증이 실패하는 한 점프는 성공하지 못합니다.

추가로 사진 2장이 필요할 수도 있습니다:

//사진 경로
img_error: "img/error.gif",
img_success: "img/success.gif",

여기에 업로드한 후 마우스 오른쪽 버튼을 클릭하고 다른 이름으로 저장하세요.

위 내용은 이 기사의 전체 내용입니다. 모든 사람이 jquery 확인 코드 구현을 마스터하는 더 나은 방법을 찾는 데 도움이 되기를 바랍니다.