Jquery-Validation自定义校验方法

最新推荐文章于 2022-11-23 22:00:29 发布

czycode

最新推荐文章于 2022-11-23 22:00:29 发布

阅读量983

点赞数

CC 4.0 BY-SA版权

分类专栏： java 文章标签： jquery springmvc validation

本文链接：https://blog.youkuaiyun.com/czycode/article/details/38232219

java 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何在jQuery-Validation中添加自定义验证方法，通过Ajax调用后端SpringMVC服务进行账号唯一性检查。在表单输入中添加onlyId属性以触发自定义验证，当验证失败时显示错误信息并阻止表单提交。

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

前端表单验证的重要性这里就不多说了，下面是前段时间做的通过自定义规则验证用户名是否唯一。

首选肯定要引人jQuery和valitation的相关文件。

1 <script src="${ctx}/static/jquery/jquery-1.11.0.min.js" type="text/javascript"></script>

2 <link href="${ctx}/static/jquery-validation/1.11.1/validate.css" type="text/css" rel="stylesheet" />

3 <script src="${ctx}/static/jquery-validation/1.11.1/jquery.validate.min.js" type="text/javascript"></script>

4 <script src="${ctx}/static/jquery-validation/1.11.1/messages_bs_zh.js" type="text/javascript"></script>

2. 页面需要验证的表单。

1<form id="inputForm" class="" action="">

2    <label class="col-md-2 ">登录账号：</label> 

3    <input type="text" name="loginId" id="loginId" onlyId=true />

4</form>

input里面的onlyId=true就是加的自定义验证，后面会仔细说明。

3.使用validation框架验证该表单。

1$(function() {

2        //为inputForm注册validate函数

3        $("#inputForm").validate();        

4    });

4. 进入重点，实现自定义校验。

01$.validator.addMethod("onlyId",function(){

02       var eqid = $("#id").val();

03       var flag = false;

04        

05       $.ajax({

06            url: "${moduleUrl}/onlyLoginId",

07            type: 'POST', 

08            async: false, 

09            timeout:1500,

10            data: {loginId:$("#loginId").val(),eqid:eqid} ,

11            success:function(r){

12                flag = r;

13            }

14        })

15         

16        return flag;

17    },"该账号已存在！" );

这里自定义了一个校验方法：onlyId,通过Ajax方式访问服务器端程序，根据返回结果判定验证是否通过。如果不通过，则提示“该账号已存在”，阻止表单提交。

5.验证后端代码，这里用的SpringMVC。其实用什么框架不重要，根据你需要的逻辑返回结果即可。

01/**

02     * 判定登录名是否存在

03     * @param loginId 登录名

04     * @param eqid 修改的用户Id

05     * @return 是否存在

06     * @throws Exception

07     */

08    @RequestMapping(value = "/onlyLoginId")

09    @ResponseBody

10    public boolean onlyLoginId(@RequestParam("loginId") String loginId, @RequestParam("eqid") String eqid)

11            throws Exception {

12        List<User> userList = userService.getAllUser();

13 

14        boolean isOnly = true;

15 

16        //遍历所有用户，如果已经存在该登录名则结果为false

17        for (User u : userList) {

18            if (u.getLoginId().trim().equals(loginId.trim())) {

19                isOnly = false;

20            }

21        }

22 

23        //如果是修改，获取修改的用户。

24        User user = userService.getUser(eqid);

25        //如果修改后的登录名不变，则结果是true

26        if (user != null && user.getLoginId().equals(loginId)) {

27            isOnly = true;

28        }

29 

30        return isOnly;

31    }