Jquery plug-in easyUi melaksanakan pengesahan borang example_jquery

Fungsi untuk dilaksanakan: Apabila menambah maklumat pelajar, gunakan fungsi pengesahan easyui untuk menentukan sama ada nombor pelajar diulang dan nombor pelajar hanya boleh menjadi nombor

Kesan akhir adalah seperti yang ditunjukkan di bawah:

Tetapi dalam proses melakukan ini, saya menghadapi beberapa siri masalah:

Kembangkan kaedah pengesahan validatebox Kod pengesahan awal adalah seperti berikut:

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

Di sini kami hanya akan melakukan pengesahan semula ID pelajar kerana terdapat masalah lain dan kami juga menghadapi beberapa masalah:

Borang ditulis seperti ini pada mulanya, atribut validType ditulis dalam atribut 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>

Terdapat masalah di sini: Firebug akan melaporkan ralat semasa menulis dengan cara ini, kerana #snumbers perlu disertakan dalam tanda petikan, tetapi menambah tanda petikan secara langsung akan menyebabkan ralat ini bersamaan dengan tanda petikan tiga kali ganda banyak maklumat di Internet, dan ada yang menggunakan melarikan diri. Saya rasa ini adalah masalah dengan penghuraian easyui, melainkan kod sumber easyui diubah. Jika ada sesiapa yang tahu mengenainya, sila berikan pencerahan kepada saya.
Kemudian letakkan atribut validType di luar dan pengesahan berjaya, seperti berikut:

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

Kemudian timbul persoalan baru, bagaimana untuk menambah pengesahan format nombor pelajar?

Beginilah cara saya menulisnya. Saya rasa ia masih merupakan masalah tanda petikan tiga kali. Saya telah mencuba pelbagai kaedah tetapi tidak berjaya

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

Kemudian saya mencuba cara lain, memuatkan kawalan easyui secara dinamik, tetapi kedua-dua pengesahan masih mempunyai masalah yang sama apabila disatukan Di sini saya pasti telah menyelesaikan masalah penghuraian easyui, jadi saya tidak akan bimbang tentangnya.

Saya menghadapi dua masalah di sini Satu ialah cara meletakkan data yang dikembalikan oleh ajax ke dalam atribut validType, iaitu, tanpa menggunakan kawasan teks lain untuk menyimpan data yang Tidak Selesai

Masalah kedua ialah tetapan dinamik kawalan easyui adalah tidak sah

Itu sahaja; tetapi selepas melihat API easyui, saya mendapati ia hanya boleh menghuraikan elemen DOM tertentu.

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

Kod berikut tidak mencapai kesan:

Saya kemudian mendapat tahu melalui Baidu:

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

parser hanya memaparkan unsur turunan $("#addSnumber"), tidak termasuk $("#addSnumber") itu sendiri, dan unsur turunannya tidak mengandungi sebarang kelas kawalan yang disokong oleh Easyui, jadi tempat ini mesti Got kesan yang diingini.

Jadi jika anda ingin membuat satu elemen, anda perlu menulisnya seperti ini:

Berbalik kepada soalan sebelumnya, sahkan bahawa nombor pelajar tidak boleh diulang dan format nombor pelajar.

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

Akhirnya, saya menyemak pelbagai maklumat dalam talian dan mendapati idea saya tidak berfungsi kerana saya mula-mula memuatkan semua ID pelajar ke dalam pelanggan dan kemudian mengesahkannya, tetapi terdapat masalah dengan ini Jika berbilang pengguna menambah ID pelajar semasa ini tempoh, Boleh membawa kepada pertindihan.

Jadi akhirnya, operasi mendapatkan semua ID pelajar dimasukkan ke dalam fungsi pengesahan, seperti berikut:

Kelebihan menulis dengan cara ini ialah ia boleh memuatkan data dalam masa nyata untuk penghakiman, dan apabila menyerahkan borang, ia juga akan memuatkan data untuk penghakiman sekali lagi, dan tidak perlu memasukkan parameter, jadi akan ada tiada lagi tanda petikan tiga kali ganda; tetapi terdapat satu Kelemahannya ialah ia akan meminta pangkalan data berkali-kali dan menggunakan banyak sumber pelayan.

//验证学号不能重复
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: '学号重复'
},

Apabila menyerahkan borang, tambah ayat berikut untuk mengesahkan borang:

Ini satu lagi soalan, kod borang adalah seperti berikut:

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

Selepas meletakkan atribut validType di luar pilihan data, ia tidak boleh disahkan dan Firebug akan melaporkan ralat! ! !

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

Akhir sekali masukkannya dalam pilihan data:

OK, semuanya OK, kedua-dua pengesahan OK! ! !

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

Ringkasan: easyui mengesahkan penduaan dan format, berbilang pengesahan

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

Kesan akhir adalah seperti yang ditunjukkan di bawah:

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

OK! ! ! Kebanyakannya diringkaskan oleh saya sendiri selepas banyak percubaan Saya masih tidak memahami prinsip banyak perkara. Saya fikir ia adalah masalah dengan easyui.min.js semua orang.