Le plug-in Jquery easyUi implémente la validation de formulaire example_jquery

Fonction à mettre en œuvre : lors de l'ajout d'informations sur l'étudiant, utilisez la fonction de vérification d'easyui pour déterminer si le numéro d'étudiant est répété et si le numéro d'étudiant ne peut être qu'un nombre

L'effet final est le suivant :

Mais en faisant cela, j'ai rencontré une série de problèmes :

Développez la méthode de vérification de validatebox. Le code de vérification initiale est le suivant :

//学号格式只能为数字  ****//这里没有问题****
number: {//value值为文本框中的值
  validator: function (value) {
    var reg = /^[0-9]*$/;
    return reg.test(value);
  },
  message: '学号格式不正确.'
},
//验证学号不能重复
snumber: {
   //param参数为textarea的id值
   validator: function (value, param) {
     //将从后台获取的json数据先放入textarea，再获取出来后解析成数组
     var snumbers = $.parseJSON($(param)[0].val());
     for(var i=0;i < snumbers.length;i++){
       if(value == snumbers[i]){ //如果学号有重复返回false
         return false;
       }
     }
     return true;
 }

Ici, nous ferons uniquement la re-vérification de la carte d'étudiant car il y a d'autres problèmes et nous avons également rencontré quelques problèmes :

Le formulaire s'écrit comme ceci au début, l'attribut validType est écrit dans l'attribut data-options :

<input id="addSnumber" class="easyui-textbox" style="width: 200px; height: 30px;" type="text" name="snumber" data-options="required:true,validType:'snumber[#snumbers]', missingMessage:'请输入学号'" />
<textarea id="snumbers" style="display: none"></textarea>

Il y a un problème ici : Firebug signalera une erreur lors de l'écriture de cette façon, car #snumbers doit être mis entre guillemets, mais l'ajout direct de guillemets provoquera une erreur. Cela équivaut à des guillemets triples, j'ai vérifié. beaucoup d'informations sur Internet, et certaines utilisent l'évasion. Aucune d'entre elles ne fonctionne. Je suppose que c'est un problème avec l'analyse d'easyui, à moins que le code source d'easyui ne soit modifié. Si quelqu'un le sait, n'hésitez pas à m'éclairer.
Placez ensuite l'attribut validType à l'extérieur et la vérification est réussie, comme suit :

<input id="addSnumber" validType="snumber['#snumbers']" class="easyui-textbox" style="width: 200px; height: 30px;" type="text" name="snumber" data-options="required:true, missingMessage:'请输入学号'" />
<textarea id="snumbers" style="display: none"></textarea>

Ensuite une nouvelle question se pose, comment ajouter la vérification du format du numéro d'étudiant ?

Voici comment je l'ai écrit. Cela n'a pas fonctionné. Je pense que c'est toujours un problème de guillemets triples. Firebug a signalé une erreur mais cela n'a pas fonctionné :

<input id="addSnumber" validType="['snumber['#snumbers']', 'number']" class="easyui-textbox" style="width: 200px; height: 30px;" type="text" name="snumber" data-options="required:true, missingMessage:'请输入学号'" />
<textarea id="snumbers" style="display: none"></textarea>

Ensuite, j'ai essayé une autre méthode, en chargeant dynamiquement le contrôle easyui, mais les deux vérifications avaient toujours le même problème une fois mises ensemble. Ici, j'ai dû résoudre le problème de l'analyse easyui, donc je ne m'en soucierai pas.

J'ai rencontré deux problèmes ici. L'un est de savoir comment mettre les données renvoyées par ajax dans l'attribut validType, c'est-à-dire sans utiliser une autre zone de texte pour stocker les données... Veuillez guider

Le deuxième problème est que le paramétrage dynamique des contrôles easyui n'est pas valide. Pour faire simple, le code est le suivant :

<input id="addSnumber" style="width: 200px; height: 30px;" type="text" name="snumber" />
//设置easyui控件
$("#addSnumber").attr("class", "easyui-textbox");
//设置验证属性
$("#addSnumber").attr("validType","snumber['#snumber']");
上面这样在jQuery里设置easyui控件后，没有效果，后来百度了下，动态添加easy控件后需要重新渲染下，如下：
//设置easyui控件
$("#addSnumber").attr("class", "easyui-textbox");
//设置验证属性
$("#addSnumber").attr("validType","snumber['#snumber']");
//解析所有页面
$.parser.parse();

C'est tout ; mais après avoir examiné l'API d'easyui, j'ai découvert qu'elle ne pouvait analyser qu'un certain élément du DOM.

Le code suivant n'obtient pas l'effet :

//设置easyui控件
$("#addSnumber").attr("class", "easyui-textbox");
//设置验证属性
$("#addSnumber").attr("validType","snumber['#snumber']");
//解析指定元素
$.parser.parse($("#addSnumber"));

Je l'ai découvert plus tard grâce à Baidu :

l'analyseur ne restitue que les éléments descendants de $("#addSnumber"), sans compter $("#addSnumber") lui-même, et ses éléments descendants ne contiennent aucune classe de contrôle prise en charge par Easyui, donc cet endroit doit être Got l'effet désiré.

Donc si vous souhaitez restituer un seul élément, vous devez l'écrire comme ceci :

//设置easyui控件
$("#addSnumber").attr("class", "easyui-textbox");
//设置验证属性
$("#addSnumber").attr("validType","snumber['#snumber']");
//解析指定元素，找它的父元素
$.parser.parse($("#addSnumber").parent());

Retour à la question précédente, vérifiez que le numéro d'étudiant ne peut pas être répété ainsi que le format du numéro d'étudiant.

Enfin, j'ai vérifié diverses informations en ligne et j'ai constaté que mon idée ne fonctionnait pas car j'avais d'abord chargé tous les identifiants d'étudiant dans le client, puis je les avais vérifiés, mais cela posait un problème si plusieurs utilisateurs ajoutaient des identifiants d'étudiant pendant cette opération. période, peut conduire à une duplication.

Donc finalement, l'opération d'obtention de toutes les cartes d'étudiant est mise dans la fonction de vérification, comme suit :

//验证学号不能重复
snumber: {
  validator: function (value) {
    var flag = true;
    $.ajax({
      type: "post",
      async: false,
      url: "/sims/StudentServlet?method=AllSNumber",
      success: function(data){//在验证函数里加载数据，加载过来后判断输入的值
        var snumbers = $.parseJSON(data);
        for(var i=0;i < snumbers.length;i++){
          if(value == snumbers[i]){
            flag = false;
            break;
          }
        }
      }
    });
    
    return flag;
  },
  message: '学号重复'
},

L'avantage d'écrire de cette façon est qu'elle peut charger les données en temps réel pour le jugement, et lors de la soumission du formulaire, elle chargera également à nouveau les données pour le jugement, et il n'est pas nécessaire de passer des paramètres, donc il y aura plus de guillemets triples ; mais il y en a un. L'inconvénient est qu'il demandera plusieurs fois la base de données et consommera beaucoup de ressources du serveur.

Lors de la soumission du formulaire, ajoutez la phrase suivante pour vérifier le formulaire :

//验证表单
var validate = $("#editStuForm").form("validate");
if(!validate){
　　$.messager.alert("消息提醒","请检查你输入的数据!","warning");
　　return;
} else{
　　//提交
}

Voici une autre question, le code du formulaire est le suivant :

<input id="addSnumber" class="easyui-textbox" validType="'snumber', 'number'" style="width: 200px; height: 30px;" type="text" name="snumber" data-options="required:true, missingMessage:'请输入学号'" />

Après avoir placé l'attribut validType en dehors des options de données, il ne peut pas être vérifié et Firebug signalera une erreur ! ! !

Enfin, mettez-le dans les options de données :

<input id="addSnumber" class="easyui-textbox" style="width: 200px; height: 30px;" type="text" name="snumber" data-options="required:true, validType:['snumber', 'number'], missingMessage:'请输入学号'" />

OK, tout va bien, les deux vérifications sont OK ! ! !
Résumé : easyui vérifie la duplication et le format, vérification multiple

//学号格式只能为数字
number: {//value值为文本框中的值
  validator: function (value) {
    var reg = /^[0-9]*$/;
    return reg.test(value);
  },
  message: '学号格式不正确.'
},
//验证学号不能重复
snumber: {
  validator: function (value) {
    var flag = true;
    $.ajax({
      type: "post",
      async: false,
      url: "/sims/StudentServlet?method=AllSNumber",
      success: function(data){//在验证函数里加载数据，加载过来后判断输入的值
        var snumbers = $.parseJSON(data);
        for(var i=0;i < snumbers.length;i++){
          if(value == snumbers[i]){
            flag = false;
            break;
          }
        }
      }
    });
    
    return flag;
  },
  message: '学号重复'
},

<tr>
  <td>学号:</td>
  <td>
     <input id="addSnumber" class="easyui-textbox" style="width: 200px; height: 30px;" type="text" name="snumber" data-options="required:true, validType:['snumber', 'number'], missingMessage:'请输入学号'" />
  </td>
</tr>

L'effet final est le suivant :

D'accord ! ! !
La plupart d'entre eux sont résumés par moi-même après de nombreuses tentatives. Je ne comprends toujours pas les principes de beaucoup de choses. Je pense que c'est un problème avec easyui.min.js. J'ai encore besoin de continuer à apprendre. tout le monde.