Das JQuery-Plug-In easyUi implementiert die Formularvalidierung example

Zu implementierende Funktion: Verwenden Sie beim Hinzufügen von Studenteninformationen die Verifizierungsfunktion von easyui, um festzustellen, ob die Studentennummer wiederholt wird und die Studentennummer nur eine Zahl sein kann

Der Endeffekt ist wie folgt:

Aber dabei bin ich auf eine Reihe von Problemen gestoßen:

Erweitern Sie die Verifizierungsmethode von „validatebox“. Der anfängliche Verifizierungscode lautet wie folgt:

//学号格式只能为数字  ****//这里没有问题****
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;
 }

Nach dem Login kopieren

Hier werden wir nur die erneute Überprüfung des Studentenausweises durchführen, da es andere Probleme gibt und wir auch auf einige Probleme gestoßen sind:

Das Formular wird zunächst so geschrieben, das validType-Attribut wird in das data-options-Attribut geschrieben:

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

Nach dem Login kopieren

Hier liegt ein Problem vor: Firebug meldet beim Schreiben einen Fehler, da #snumbers in Anführungszeichen eingeschlossen werden muss, aber das direkte Hinzufügen von Anführungszeichen führt zu einem Fehler. Dies entspricht dreifachen Anführungszeichen, die ich überprüft habe Es gibt viele Informationen im Internet, und einige verwenden Escape-Funktionen. Ich vermute, dass dies ein Problem beim EasyUI-Parsen ist, es sei denn, der Quellcode von EasyUI wird geändert. Wenn jemand davon weiß, kann er mich gerne aufklären.
Setzen Sie dann das validType-Attribut nach außen und die Überprüfung ist wie folgt erfolgreich:

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

Nach dem Login kopieren

Dann stellt sich eine neue Frage: Wie füge ich eine Überprüfung des Studierendennummernformats hinzu?

So habe ich es geschrieben. Ich glaube, es ist immer noch ein Problem mit dreifachen Anführungszeichen. Ich habe verschiedene Methoden ausprobiert, aber es hat nicht funktioniert

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

Nach dem Login kopieren

Dann habe ich es auf andere Weise versucht und das EasyUI-Steuerelement dynamisch geladen, aber die beiden Überprüfungen hatten beim Zusammenfügen immer noch das gleiche Problem. Hier muss ich das Problem der EasyUI-Analyse gelöst haben, also mache ich mir darüber keine Sorgen.

Ich bin hier auf zwei Probleme gestoßen. Eines davon besteht darin, die von Ajax zurückgegebenen Daten in das validType-Attribut einzufügen, das heißt, ohne einen anderen Textbereich zum Speichern der Daten zu verwenden ... Bitte führen Sie

aus

Das zweite Problem besteht darin, dass die dynamische Einstellung der EasyUI-Steuerelemente ungültig ist. Vereinfacht ausgedrückt lautet der Code wie folgt:

<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();

Nach dem Login kopieren

Das war's; aber nachdem ich mir die API von easyui angesehen hatte, stellte ich fest, dass sie nur ein bestimmtes DOM-Element analysieren kann.

Der folgende Code erzielt den Effekt nicht:

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

Nach dem Login kopieren

Ich habe später über Baidu herausgefunden:

Der Parser rendert nur die Nachkommenelemente von $("#addSnumber"), nicht jedoch $("#addSnumber") selbst, und seine Nachkommenelemente enthalten keine von Easyui unterstützten Steuerklassen, daher muss dieser Ort Got sein den gewünschten Effekt.

Wenn Sie also ein einzelnes Element rendern möchten, müssen Sie es wie folgt schreiben:

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

Nach dem Login kopieren

Zurück zur vorherigen Frage: Vergewissern Sie sich, dass die Studentennummer nicht wiederholt werden kann, und überprüfen Sie das Format der Studentennummer.

Schließlich habe ich verschiedene Informationen online überprüft und festgestellt, dass meine Idee nicht funktionierte, da ich zuerst alle Studentenausweise in den Client geladen und sie dann überprüft hatte. Dabei gab es jedoch ein Problem, wenn mehrere Benutzer dabei Studentenausweise hinzufügten Zeitraum, kann zu Duplikaten führen.

Abschließend wird der Vorgang zum Erhalten aller Studentenausweise wie folgt in die Verifizierungsfunktion übernommen:

//验证学号不能重复
snumber: {
  validator: function (value) {
    var flag = true;
    $.ajax({
      type: "post",
      async: false,
      url: "/sims/StudentServlet&#63;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: '学号重复'
},

Nach dem Login kopieren

Der Vorteil dieser Schreibweise besteht darin, dass Daten in Echtzeit zur Beurteilung geladen werden können. Beim Absenden des Formulars werden die Daten auch erneut zur Beurteilung geladen, und es ist nicht erforderlich, Parameter zu übergeben keine dreifachen Anführungszeichen mehr; aber es gibt eines. Der Nachteil besteht darin, dass die Datenbank viele Male angefordert wird und viele Serverressourcen verbraucht werden.

Fügen Sie beim Absenden des Formulars den folgenden Satz hinzu, um das Formular zu überprüfen:

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

Nach dem Login kopieren

Hier ist eine weitere Frage, der Formularcode lautet wie folgt:

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

Nach dem Login kopieren

Nachdem das validType-Attribut außerhalb der Datenoptionen platziert wurde, kann es nicht überprüft werden und Firebug meldet einen Fehler! ! !

Fügen Sie es schließlich in die Datenoptionen ein:

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

Nach dem Login kopieren

Okay, alles ist ok, beide Verifizierungen sind ok! ! !

Zusammenfassung: easyui überprüft Duplizierung und Format, mehrfache Überprüfung

//学号格式只能为数字
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&#63;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: '学号重复'
},

Nach dem Login kopieren

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

Nach dem Login kopieren

Der Endeffekt ist wie folgt:

OK! ! !

Die meisten davon habe ich nach vielen Versuchen noch nicht verstanden. Ich denke, dass es sich um ein Problem mit easyui.min.js handelt. Ich hoffe, dass dieser Artikel weiterhelfen kann alle.

Das JQuery-Plug-In easyUi implementiert die Formularvalidierung example_jquery