Validate笔记二：表单验证插件Validate中的remote

来源：互联网发布：linux 当前时间编辑：程序博客网时间：2024/06/05 15:43

Validate中的remote支持自定义验证规则。以前写的验证都是整个表单提交后，进行检查。感觉没有remote好用。。。

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <base href="<%=basePath%>">    <meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">    <title>validate2</title><script type="text/javascript" src="<%=basePath %>js/jquery-1.8.3.min.js"></script><script type="text/javascript" src="<%=basePath %>js/jquery.form.js"></script><script type="text/javascript" src="<%=basePath %>js/jquery.validate.js"></script><script type="text/javascript" src="<%=basePath %>js/messages_zh.js"></script><script type="text/javascript">$(function () {            $("#form1").validate({                rules: {                    userName: { required: true,                                        minlength: 3,                                        maxlength: 18,                                       remote: {                                                //   message:"此用户名已存在！" ,                                                                             url: '<%=basePath %>mlc/checkUserName',                                                type: 'get',//请求方式,                                               dataType: 'json',                                               async:true,                                               delay : 2000,//每输入一个字符，就发ajax请求，服务器压力还是太大设置2秒发送一次ajax                                                data:{ //传参数                                                     user:                                                     //$("#userName").val()                                                     function(){                                                    return $("#userName").val();}, //user参数名，不用引号，如果想传入特定控件的值一定加入function,这样才能把值传入                                               }                                                                                                                                                                                                                          }                                 },                    Email: { required: true,email:true },                    UserPassword: { required: true ,minlength: 6 },                    Mobile: { required: true, number:true },                    IdCard: { required: true/*,isIdCardNo: true */},                    Age: { required: true ,number:true,min:1,max:100 }                },                messages:{                    userName: {                         required: "请输入用户名！",                        minlength: "用户名长度最少需要3位！",                        maxlength: "用户名长度最大不能超过18位！",                        remote: "此用户名已存在！"                     },                    Email: {                        required: "请填写邮箱",                        email: "请输入正确的邮箱格式"                    },                    UserPassword: {                        required: "请填写你的密码!",                        minlength: "密码长度不能小于6位"                    },                    Mobile: {                        required: "请填写你的手机号码",                        number:"手机号码只能为数字"                     },                    IdCard: {                        required: "请输入身份证号码！"//,                      //  isIdCardNo:"请输入正确的身份证号码！"                    },                    Age: {                        required: "请输入年龄!",                        number: "请输入数字",                        min: "年龄不能小于1",                         max: "年龄不能大于100"                     }                },                /*错误提示位置*/                errorPlacement: function (error, element) {                    error.appendTo(element.parent());                }            });        });</script></head><body><div class="container">       <form id="form1" name="form1"method="post" action="">        <div>        <p> 用户名:<input type="text" value="" name="userName"  id="userName"/> </p>        <p> 密码:<input type="password" value="" name="UserPassword" /> </p>        <p> 邮箱:<input type="text" value="" name="Email" /> </p>        <p> 手机号码:<input type="text" value="" name="Mobile" /> </p>        <p> 身份证号码:<input type="text" value="" name="IdCard" /> </p>        <p> 年龄:<input type="text" value="" name="Age" /> </p>        <p> <input type="submit" id="btn1" value="提交"></p>        </div>    </form>     </div><!--container end--></body></html>

后台:

@RequestMapping(value="/checkUserName")//@ResponseBodypublic void checkUserName( String user,HttpServletResponse response){          System.out.println(user);          boolean state=true;        //下面是response的设置          response.setContentType("text/xml;charset=utf-8");           response.setHeader("Cache-Control","no-cache"); //为了指示IE浏览器（客户端）不要缓存页面，          if(user.equals("sasa")){          state=false;          }else{          state=true;          }          try {         //这是输出为JSON串的一种方式，结果应为JSON串，属性名一定是valid，值为true或false        //JSONObject jsobjcet = new JSONObject();         //jsobjcet.put("valid", state);        //response.getWriter().write(jsobjcet.toString());         //response.getWriter().flush();        response.getWriter().print(state);        //System.out.println(jsobjcet.toString());         } catch (IOException e) {         e.printStackTrace();         } }

这里后台向前端只是返回了一个true或者false：如果是false，则报出提示信息;如果是true,则默认通过。

现在有一点不明白的是，在网上很多人说后台返回的要求的是JSON格式，可是这样并不提示信息。。。

@RequestMapping(value="/checkUserName")//@ResponseBodypublic void checkUserName( String userName,HttpServletResponse response){          System.out.println(userName);          boolean state=true;        //下面是response的设置          response.setContentType("text/xml;charset=utf-8");           response.setHeader("Cache-Control","no-cache"); //为了指示IE浏览器（客户端）不要缓存页面，          if(userName.equals("sasa")){          state=false;          }else{          state=true;          }          try {         //这是输出为JSON串的一种方式，结果应为JSON串，属性名一定是valid，值为true或false        JSONObject jsobjcet = new JSONObject();         jsobjcet.put("valid", state);        response.getWriter().write(jsobjcet.toString());         response.getWriter().flush();        //response.getWriter().print(state);        //System.out.println(jsobjcet.toString());         } catch (IOException e) {         e.printStackTrace();         } }

郁闷啊啊。。。。

阅读全文

0 0