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

要实现的功能：添加学生信息时，使用易用户的验证功能判断学号是否重复，学号只能是一个数字。

最终效果如下：

但是在这样做的过程中，我遇到了一系列的问题：

展开validatebox的验证方法。初始验证代码如下：

//学号的格式只能是数字* * * *//这里没有问题* * * * number 3360 {//值是文本框中的值：validator 3360函数(value){ var reg=/[0-9]* $/；返回reg.test(值)；}，message:“学生id的格式不正确。”}，//验证学号不能重复。snumber: {//param参数是textarea的id值。validator 3360function (value，param){//首先将从后台获取的json数据放入textarea。获取它并将其解析成一个var s numbers=$。parsejson ($ (param) [0]。val())；for(var I=0；我数着。长度；I ){ if(value==snumbers[i]){ //如果学号重复，返回false返回false；} }返回true}这里，只重复验证学号，因为还有其他问题，而且也遇到了一些问题：

表单最初是这样写的，validType属性写在data-options属性中：

input id=' addSnumber ' class=' easui-textbox ' style=' width : 200 px；' height: 30px'type=' text ' name=' s number ' data-options=' required d : true，validtype : ' s number[# s numbers]'，MissingMessage: '请输入学生编号' '/textarea ID=' s numbers ' style=' display : none '/textarea。这里有一个问题：像这样写Firebug会报错，因为# snumbers需要用引号括起来，但是直接加引号会出错。这相当于三倍引号，网上搜索了很多信息，有些是转义的，但是不起作用。我猜想这是一个easyui解析问题，除非easyui的源代码被更改。如果你有大神，请不吝赐教。然后将validType属性放在外面，验证成功，如下所示：

input id=' adds number ' valid type=' s number[' # s numbers ']' class=' easy ui-textbox ' style=' width : 200px；' height: 30px'type=' text ' name=' s number ' data-options=' required : true，missing message : '请输入学生编号' '/text area id=' s numbers ' style=' display : none '/text area，然后出现新问题。如何添加学号格式的验证？

我是这样写的，但是没有用，但是感觉还是三引号的问题。Firebug报告了一个错误，尝试了各种方法，但都无效：

输入id=' addSnumber ' valid type='[' snumber[' # snumber ']'，' number ']' class=' easyui-textbox ' style=' width : 200px；' height: 30px'type=' text ' name=' s number ' data-options=' required d : true，MissingMessage: '请输入学生编号' '/text area ID=' s numbers ' style=' display : none '/text area。然后我尝试了另一种方法来动态加载easyui控件，但是这两种验证结合在一起仍然会有相同的问题。这里我肯定是easyui解析的问题，所以就不担心了。

这里遇到了两个问题，一个是如何将ajax返回的数据放入validType属性中，即不需要将数据存储在另一个textarea中，这个问题还没有解决.寻求指导。

二是动态设置easyui控件无效的问题。简单来说，代码如下：

输入id=' addSnumber ' style=' width : 200 px；' height: 30px'Type='text' name='snumber' ///设置easyui控件$ ('# addsnumber ')。attr ('class '，' easui-textbox ')；//设置身份验证属性$ ('# addsnumber ')。attr ('validtype '，' s number[' # s number ']')；这样，在jQuery中设置easyui控件后，就没有效果了。后来百度改了，动态添加easy control后需要重新渲染，如下：//Set easy ui control $(' # adds number ')。attr ('class '，' easui-textbox ')；//设置身份验证属性$ ('# addsnumber ')。attr ('validtype '，' s number[' # s number ']')；//解析所有页面$ . parser . Parse()；这就够了；但是在检查了easyui的api之后，发现只能解析某个dom元素。

以下代码不起作用：

//设置easyui控件$ ('# addsnumber ')。attr ('class '，' easui-textbox ')；//设置身份验证属性$ ('# addsnumber ')。attr ('validtype '，' s number[' # s number ']')；//解析指定的元素$ . parser . Parse($(' # addSnumber '))；百度之后，我了解到：

解析器只呈现$('#addSnumber ')的后代元素，但不包含$('#addSnumber ')本身，其后代元素不包含任何Easyui支持的控件类，所以这个地方无法得到想要的效果。

所以如果你想渲染一个元素，可以这样写：

//设置easyui控件$ ('# addsnumber ')。attr ('class '，' easui-textbox ')；//设置身份验证属性$ ('# addsnumber ')。attr ('validtype '，' s number[' # s number ']')；//解析指定的元素并找到其父元素$。parser.parse ($ ('# addsnumber ')。parent())；回到上一个问题，确认学生证不能重复，学生证的格式。

最后在网上查了各种资料，发现我的思路并不好，因为我先把所有学生证号加载到客户端，然后再验证。然而，有一个问题。如果在此期间有多个用户添加了学生证号码，可能会导致重复。

最后，将获取所有学生编号的操作放入验证功能，如下所示：

//验证学号不能重复：snum ber : { validator : function(value){ var flag=true；$.ajax({ type: 'post '，async: false，URL : '/sims/studentervlet？Method=allsnumber '，success : function(data){//加载验证函数中的数据，然后判断输入值var snumbers=$。parseJSON(数据)；for(var I=0；我数着。长度；I){ if(value==snum bers[I]){ flag=false；打破；} } } });返回标志；}，message: '重复学号' }，这样写的好处是：可以实时加载数据进行判断，提交表单时会再次加载数据进行判断，不需要传入参数，所以不会出现三倍引号；但是有一个缺点就是数据库会被多次请求，服务器的资源消耗大。

提交表格时添加以下句子以验证表格：

//验证表单varvalidate=$(' # editstform ')。表单(' validate ')；if(！Validate){$.messager.alert('消息提醒'，'请检查您输入的数据！“警告”)；返回；} else{//submit}这里还有一个问题，表单代码如下：

input id=' adds number ' class=' easy ui-textbox ' valid TYPe=' s number '，' number ' ' style=' width: 200px' height: 30px'type=' text ' name=' s number ' data-options=' required d : true，missingmessage3360 '请在此输入学生编号' '/将validType属性放在data-options之外后，无法验证，Firebug将报告错误！

最后，把它放到数据选项中：

input id=' addSnumber ' class=' easui-textbox ' style=' width : 200 px；' height: 30px'type=' text ' name=' s number ' data-options=' required d : true，有效type3360 ['s number '，' number']，缺失消息： '请输入学生编号' '/OK，没事，两个验证都没问题！总结：easyui验证重复和格式，多重验证。

//学号的格式只能是数字number : {//值是文本框中的值，validator : function(value){ varreg=/[0-9]* $/；返回reg.test(值)；}，message:“学生id的格式不正确。”}，//验证学号不能重复。snumber3360 {validator :函数(值){ varflag=true$.ajax({ type: 'post '，async: false，URL : '/sims/studentervlet？Method=allsnumber '，success : function(data){//加载验证函数中的数据，然后判断输入值var snumbers=$。parseJSON(数据)；for(var I=0；我数着。长度；I){ if(value==snum bers[I]){ flag=false；打破；} } } });返回标志；}，message: '重复的学生id' }，tr td学生id :/TD TD输入id=' add number ' class=' easyui-textbox ' style=' width : 200px；' height: 30px'type=' text ' name=' s number ' data-options=' required d : true，有效type3360 ['s number '，' number']，缺少消息： '请输入学生id''//td/tr。最终效果如下：

好的！大部分都是自己总结了很多遍，很多东西还是不懂原理。我觉得应该是easyui.min.js的问题，需要继续研究。希望这篇文章能对大家有所帮助。