Jquery plug-in easyUi implements form validation example_jquery

Function to be implemented: When adding student information, use the verification function of easyui to determine whether the student number is repeated and the student number can only be a number

The final effect is as shown below:

But in the process of doing this, I encountered a series of problems:

Expand the verification method of validatebox. The initial verification code is as follows:

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

Here we will only do the student ID re-verification because there are some other problems and we also encountered some problems:

The form is written like this at first, the validType attribute is written in the data-options attribute:

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

There is a problem here: Firebug will report an error when writing this way, because #snumbers needs to be enclosed in quotation marks, but adding quotation marks directly will cause an error. This is equivalent to triple quotation marks. I checked a lot of information on the Internet, and some use escaping. None of them work. I guess this is a problem with easyui parsing, unless the source code of easyui is changed. If anyone knows about it, please feel free to enlighten me.
Then put the validType attribute outside and the verification is successful, as follows:

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

Then a new question arises, how to add student number format verification?

This is how I wrote it. It didn’t work. I think it’s still a problem with triple quotes. Firebug reported an error. I tried various methods but it didn’t work:

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

Then I tried another way, dynamically loading the easyui control, but the two verifications still had the same problem when put together. Here I must have solved the problem of easyui parsing, so I won’t worry about it.

I encountered two problems here. One is how to put the data returned by ajax into the validType attribute, that is, without using another textarea to store the data. Unsolved... Please guide

The second problem is that dynamically setting easyui controls is invalid. To put it simply, the code is as follows:

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

That’s it; but after looking at easyui’s API, I found that it can only parse a certain DOM element.

The following code does not achieve the effect:

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

I later found out through Baidu:

parser only renders the descendant elements of $("#addSnumber"), not including $("#addSnumber") itself, and its descendant elements do not contain any control classes supported by Easyui, so this place has to be Got the desired effect.

So if you want to render a single element, you have to write it like this:

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

Back to the previous question, verify that the student number cannot be repeated and the student number format.

Finally, I checked various information online and found that my idea was not working, because I first loaded all the student IDs into the client and then verified them, but there was a problem with this. If multiple users added student IDs during this period, May lead to duplication.

So finally, the operation of obtaining all student IDs is put into the verification function, as follows:

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

The advantage of writing this way is that it can load data in real time for judgment, and when submitting the form, it will also load data for judgment again, and there is no need to pass in parameters, so there will be no more triple quotation marks; but there is one The disadvantage is that it will request the database many times and consumes a lot of server resources.

When submitting the form, add the following sentence to verify the form:

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

Here is another question, the form code is as follows:

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

After placing the validType attribute outside data-options, it cannot be verified and Firebug will report an error! ! !

Finally put it in data-options:

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

OK, everything is OK, both verifications are OK! ! !
Summary: easyui verifies duplication and format, multiple verification

//学号格式只能为数字
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>

The final effect is as shown below:

OK! ! !
Most of them are summarized by myself after many attempts. I still don’t understand the principles of many things. I think it is a problem with easyui.min.js. I still need to continue to learn. I hope this article can help everyone.