移动互联培训

您当前的位置:HTML5培训 > 前端开发 > JQuery

Jquery插件easyUi实现表单验证示例

来源:未知 2018-08-10

这篇文章主要介绍了Jquery插件easyUi实现表单验证示例,需要的朋友可以参考下,要实现的功能:在做添加学生信息的时候,利用easyui的验证功能判断 学号是否重复和学号只能为数字。

但在做这个的过程中,遇到了一系列的问题:

jquery表单验证

扩展validatebox的验证方法,开始的验证代码如下:

//学号格式只能为数字 ****//这里没有问题****

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;

}

在这里先只做学号重复验证,因为有其它一些问题,也遇到了一些问题:

表单开始是这样写的,validType属性写在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">

这里就有一个问题就是:这样写Firebug会报错,因为#snumbers需要用引号引起来,但是直接加引号会出错,这里相当于是三重引号,网上查了很多资料,有的用转义,都行不通,我猜想这里是easyui解析的问题,除非更改easyui的源码。有大神知道的还请不吝赐教。

然后将validType属性放在外面,验证成功,如下:

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

然后新的问题又出现了,如何把学号格式验证加进去?

我是这样写的,不成功,感觉还是三重引号的问题,Firebug报错,各种方法都试了,无效:

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

然后我试了另一种方式,动态加载easyui控件,但是两个验证放在一起还是会有同样的问题,在这里我肯定是easyui解析的问题了,也就不纠结了。

这里遇到两个问题,一个是怎么将ajax返回来的数据放进validType属性中,就是不用另一个textarea来存数据,未解决......求指导

第二个是动态设置easyui控件无效的问题,简单说下,代码如下:

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

这样就可以了;但是查看easyui的api后发现可以只解析某个dom元素。

下面这段代码达不到效果:

$("#addSnumber").attr("class", "easyui-textbox");

//设置验证属性

$("#addSnumber").attr("validType","snumber['#snumber']");

//解析指定元素

$.parser.parse($("#addSnumber"));

后经百度后得知:

parser只渲染$("#addSnumber")的子孙元素,并不包括$("#addSnumber")自身,而它的子孙元素并不包含任何Easyui支持的控件class,所以这个地方就得不到想要的效果了。

所以想要渲染单个元素要像下面这样写:

$("#addSnumber").attr("class", "easyui-textbox");

//设置验证属性

$("#addSnumber").attr("validType","snumber['#snumber']");

//解析指定元素,找它的父元素

$.parser.parse($("#addSnumber").parent());

回到之前的问题,验证学号不能重复和学号格式。

后网上查阅了各种资料,发现我的思路不行,因为我是先将所有学号加载到客户端再验证,但这样有一个问题,如果多个用户在这期间添加了学号就有可能导致重复。

所以后将获取所有学号的操作放到验证函数里,如下:

//验证学号不能重复

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: '学号重复'

},

这样写的好处是:可以实时加载数据来判断,在提交表单时也会再加载数据来判断一次,而且不需要传入参数,就不会再有三重引号的问题了;但有一个缺点就是会很多次请求数据库,服务器资源消耗大。

提交表单时加入下面这句,验证表单:

//验证表单

var validate = $("#editStuForm").form("validate");

if(!validate){

$.messager.alert("消息提醒","请检查你输入的数据!","warning");

return;

} else{

//提交

}

这里有另一个问题,表单代码如下:

<input id="addSnumber" class="easyui-textbox" validType="'snumber', 'number'"

这里将validType属性放在data-options外面后,不能验证,Firebug会报错!!!

后将其放到data-options里面:

<input id="addSnumber" class="easyui-textbox" style="width: 200px; height: 30p

OK,都行了,两个验证都可以了!!!

总结:easyui验证重复和格式,多重验证

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>

终效果如下图:

相关资讯
400-611-6270

Copyright ©2004-2024 华清远见 版权所有
京ICP备16055225号,京公海网安备11010802025203号