easyform插件表单验证ajax方式使用

1、easyform 是一个jQuery插件，包括easyfrom，easytip，两个部分。

easyform是表单验证插件，支持复杂的表单验证规则，并且使用简单。甚至可以做到1行js搞定全部。

2、使用：首先加载以下三个文件，其中jquery-2.1.0.min.js不得低于1.7,且放在easyform.js上面，顺序呢不能颠倒，因为

easyform依赖于jquery，所以要先加载jquery。

 <link rel="stylesheet" href="../easyform/easyform.css">
      <script src="js/jquery-2.1.0.min.js"></script>
      <script src="../easyform/easyform.js"></script>

3、在document的ready里加上。

 $("#form").easyform();

4、实例如下：

easyform包含两个类，easyform和easyinput。easyinput负责搞定单个对象的规则验证，很显然，easyform负责调用easyinput。

  <h1>表单</h1>
	<form action="/" id="reg-form" method="post">
	       用户名：<input type="text" class="inputgri" id="mid" name="username"
			 data-easyform="length:3 10;real-time;ajax:ajax_demo();"
    			 data-message="用户名必须为3-10位的英文字母或数字"
			 data-easytip="position:top;class:easy-blue;"
			 data-message-ajax="用户名已存在!"
			/>

	        密码:<input type="text" class="inputgri" name="password"
			 data-easyform="length:6 16;real-time;"
			 data-message="密码必须为6—16位"
			 data-easytip="class:easy-blue;"
			/>
		
		生日:<input type="text" name="birthday" class="inputgri" onClick="WdatePicker()"/>
		
		验证码:<img id="num" src="${pageContext.request.contextPath}/user/code" />
		<a href="javascript:;" onclick="document.getElementById('num').src = '${pageContext.request.contextPath}/user/code?'+(new Date()).getTime()">换一张</a>
			
	       <input type="text" class="inputgri" name="number" />			
	       <input type="button" class="button" id="sub" value="Submit »" />
    </form>

对于ajax处理：如动态验证某个用户名是否已经注册：

<script type="text/javascript">
	$().ready(function(){
	    var ef = $("#reg-form").easyform();       //页面中出现一次
	});
        function ajax_demo(){

           // alert(data);
                $.ajax({
                    type:"post",
                    url:"${pageContext.request.contextPath}/user/checkedUser",
                    data:$('#reg-form').serialize(),    //serialize()方法通过序列化表单值
                    dataType:"JSON",
                    success:function(result){
                      if(result.status){
                           //console.log(result.status);
                           $("#mid").trigger("easyform-ajax", false);      //固定且必加
			}
                    }
                });
            }
   </script>

在任意input的data-easyform属性中，添加ajax:fun(a,b,c);就可以定义一个ajax验证规则。其中ajax是固定的，fun是函数名称，任意一个函数都可以，当然函数里即使没执行ajax也无所谓。函数的参数也是完全自定义的，没有任何硬性要求。

唯一需要注意的是，ajax规则通过在input上添加easyform-ajax事件来监听验证结果，所以需要你在你的自定义函数中返回easyform-ajax事件，就像这样：

$("#uid").trigger("easyform-ajax", false);

true/false代表验证的成功或失败。

在上面的js代码中出现result.status, 在做信息提示的时候，我们经常会将信息声明为一个类：

如Results.java

public class Results {
	private String information;  //提示信息的内容
	private boolean status;      //信息的状态true/false

	public String getInformation() {
		return information;
	}

	public void setInformation(String information) {
		this.information = information;
	}

	public boolean isStatus() {
		return status;
	}

	public void setStatus(boolean status) {
		this.status = status;
	}
}

Controller中对信息的处理：

public String register(HttpServletRequest request,String number,User user,@DateTimeFormat(pattern="yyyy-MM-dd") Date birthday)throws Exception{
	System.out.println(user+"  "+birthday);
	Results res = new Results();
	String codeImage = (String)request.getSession().getAttribute("code");
	System.out.println(codeImage);
	if(codeImage.equalsIgnoreCase(number)){
		userService.regist(user);
		res.setStatus(true);
	}else{
		res.setStatus(false);
		res.setInformation("验证码错误~~");
	}
	String jsonString = JSONObject.toJSONString(res);       //阿里的fastJson.jar
	return jsonString;
}

对于错误信息提示，也可以提供一个map集合进行存储错误信息！！！

$("form").serialize()和 new FormData($('#uploadForm')[0])都是序列化表单，实现表单的异步提交,二者区别是：$("form").serialize()仅仅可以序列化表单中的input、select等,但对于文件上传类的就不支持了，现在就可以用new FormData($('#uploadForm')[0])了，在使用new FormData($('#uploadForm')[0])时:

======jq文件必须为1.8以上 ======

======在ajax请求中，processData: false, contentType: false,必须有，否则缺少这二者，将会提交失败======

easyform插件表单验证ajax方式使用

猜你喜欢