Exemple simple de démonstration de l'implémentation jquery du formulaire validation_jquery

L'exemple de cet article décrit l'implémentation jquery du code de validation de formulaire. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :
La capture d'écran de l'effet en cours d'exécution est la suivante :

Le code spécifique est le suivant :

C'est plus simple d'aller directement sur le plug-in pour implémenter le code C'est plus facile d'expliquer autour du code :

/*
描述：基于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);

​

Parlons d'abord du principe de mise en œuvre :

Définissez d'abord les règles régulières et les informations d'invite correspondantes,

Ajouter un attribut de vérification personnalisé,

Récupérez ensuite la valeur de l'attribut check et séparez plusieurs valeurs par des espaces. Utilisez split() pour le diviser en un tableau et appelez la méthode check() une par une pour vérifier.

Ensuite, les informations affichées sont déterminées par la valeur de retour de la vérification.

Il y a ici deux vérifications spéciales, à savoir :

1. Vérifiez s'il est vide (obligatoire)

2. Les deux mots de passe sont-ils cohérents (pwd2)

Aucun de ces deux n'utilise d'expressions régulières, car elles ne sont pas utilisées du tout. Si les deux mots de passe sont cohérents, j'ai écrit une méthode distincte pwdEqual();

Je n'ai écrit que quelques règles de vérification dans le plug-in. Si elles ne suffisent pas, vous pouvez les développer et les ajouter vous-même.

L'extension ne prend que 3 étapes :

1. Ajoutez une expression régulière,

2. Ajoutez les informations d'invite correspondantes,

3. Ajoutez le traitement des cas correspondant dans la méthode check()

Instructions d'utilisation du plug-in :

1. Ajoutez des attributs de vérification personnalisés aux zones de texte, aux zones de mot de passe et aux zones de texte multilignes qui doivent être vérifiées dans le formulaire

2. Les vérifications de formats multiples sont séparées par des espaces, tels que (vérifier les champs obligatoires et l'e-mail en même temps) : check="e-mail requis"

3. Si vous souhaitez vérifier si les deux mots de passe sont cohérents, utilisez pwd1 et pwd2 ensemble, comme indiqué ci-dessous :

pwd1 stocke la valeur saisie pour la première fois et pwd2 stocke la valeur saisie pour la deuxième fois. Ce n'est pas grave si vous utilisez uniquement pwd1, mais si vous utilisez uniquement pwd2, la vérification ne réussira jamais.

Un exemple de code DEMO est donné ci-dessous :

<!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>

Exemple d'image d'effet :

Si l'exemple de code est soumis avec succès, il passera à la page success.html, vous devez donc créer vous-même un success.html. Vous ne pouvez rien y écrire.

Cependant, tant qu'une vérification échoue, le saut ne réussira pas.

De plus, vous aurez peut-être également besoin de 2 photos :

//Chemin de l'image
img_error : "img/error.gif",
img_success : "img/success.gif",

Téléchargé ici, faites un clic droit et enregistrez sous.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère que cela pourra aider tout le monde à trouver une meilleure façon de maîtriser l'implémentation du code de vérification jquery.