jQuery Validation Engine Ajax验证

最新推荐文章于 2021-08-06 01:51:37 发布

元澈

最新推荐文章于 2021-08-06 01:51:37 发布

阅读量540

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript

本文链接：https://blog.youkuaiyun.com/ab7253957/article/details/50460943

JavaScript 专栏收录该内容

11 篇文章

订阅专栏

本文介绍如何在HTML表单中使用jQuery Validation Engine插件进行客户端验证，并结合AJAX实现服务器端验证，确保数据唯一性和准确性。文章详细解释了验证属性、提示信息配置、表单绑定及服务器端处理等步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.添加验证属性 validate[ajax[ajaxNo]]，如下：

<span style="font-size:18px;"><form id="form">
<input class="validate[required,custom[integer],min[21],max[899]],ajax[ajaxNo]]"type="text" name="stationNo" id="stationNo">
</form>
</span>

2.jquery.validationEngine-zh_CN.js文件中

'ajaxNo': {
	'url': 'mj/station/assert',     /* 验证程序地址 */
	'alertTextOk': '* 验证通过',    /* 验证通过*/
        'alertText': '* 编号已被占用',  /* 验证不通过*/
	'alertTextLoad': '* 正在验证'
				}

3.绑定表单

$ready(function () {
        $("#form").validationEngine();
    });

4、服务器端处理

会向服务器端传两个参数：fieldId,fieldValue，根据这两个参数实现判断逻辑，然后返回一个三元素的数组：元素ID、检查是否通过(true or false)、提示信息。如下：

public String[] assertStationNO(Integer stationNo,String fieldId,String fieldValue){//fieldId:HTML标签ID，fieldValue:标签value
        Station station = stationServicer.selectByStationNo(Integer.parseInt(fieldValue));
        String[] str=new String[3];
        if (station ==null){
            str[0] =fieldId;
            str[1] ="true";//Boolean为true
            //str[2] ="验证通过";
            return str;
        }
        str[0] =fieldId;
        str[1] ="";//Boolean为false
        //str[2] ="验证不通过";
        return str;
    }

注：返回数组第三个元素可为空，提示信息则显示步骤2中的提示

5.将步骤2的内容添加到当前页面

    $(function(){
        $.extend($.validationEngineLanguage.allRules,{
            'ajaxNo': {
                'url': 'mj/station/assert',   /* 验证程序地址 */
                'alertTextOk': '* 验证通过',  /* 验证通过*/
                'alertText': '* 编号已被占用',/* 验证不通过*/
                'alertTextLoad': '* 验证中，请稍候...'
            }
        });
    });

6.添加其他参数

      $.extend($.validationEngineLanguage.allRules, {
          'ajaxNo': {
              'url': 'mj/station/validatestationno',
              "extraData": 'deviceSysId=1',   //静态参数
              "extraDataDynamic": ['#deviceSysId'], //动态参数  <span style="font-family: Arial, Helvetica, sans-serif;">deviceSysId为标签名称</span>
              'alertTextOk': '* 验证通过',
              'alertText': '* 编号已被占用',
              'alertTextLoad': '* 验证中，请稍候...'
          }
      });