layui+form+Ajax

 

 

先贴一个示例代码 

layui.use([ 'form' ], function() {
	var form = layui.form, layer = layui.layer;

	/* 自定义表单验证 */
	form.verify({
		username : function(value, item) { // value：表单的值、item：表单的DOM对象
			if (!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)) {
				return '用户名不能有特殊字符';
			}
			if (/(^\_)|(\__)|(\_+$)/.test(value)) {
				return '用户名首尾不能出现下划线\'_\'';
			}
			if (/^\d+\d+\d$/.test(value)) {
				return '用户名不能全为数字';
			}
			if (value.length < 3 || value.length > 12) {
				return '用户名必须3到12位';
			}
		},
		password : [ /^[\S]{6,12}$/, '密码必须6到12位，且不能出现空格' ]
	});
	
	form.on('submit(L_submit)', function(data) {
		var username=$("#L_username").val();
		var password=$("#L_password").val();
		var vercode=$("#L_vercode").val();
		$.ajax({
			type:'POST',
			url:'user/login.do',
			data:{username:username,password:password,vercode:vercode},
			success:function(data){
				if(data=="success"){
					window.location.href='logindex.jsp';
				}
				else{
					layer.alert("用户名或密码错误",
					{title:'登录失败'});
				}
			}
		});
		return false;
	});

});

第一  引入使用form表单：

那么我们写在页面上的<form>标签是静态的，当我们在JavaScript中使用时，需要进行调用，怎么调用呢？

我上面这段代码，包含了调用表单，自定义调用表单，以及使用Ajax提交后台的验证。

调用表单：layui.use([ 'form' ], function() {

            var form=layui.form；

}

第二  自定义表单验证：

这个是官网文档的，使用的是正则表达式，当然也可以使用我们熟悉的，比如下面的用户名长度的验证，那个是我自己添加的。

第三  提交监听：

就是下面的form.on('submit(L_submit)', function(data)，固定语法，L_submit  是你的form表单的提交按钮的属性                     

 <button class="layui-btn" lay-filter="L_submit" lay-submit>立即登录</button>

 就是 这个  lay-filter   就相当与jQuery的  id选择器    lay-filter 就相当于一个锚点。

第四  使用Ajax

这个其实是可以正常用的，首先使用jQuery的id选择器得到表单内容  然后直接进入Ajax就可以了

有的不能用的，大概率是没有引入jQuery的依赖包

<script src="community/js/jquery.min.js"></script>

 这个是不能少的，不然网页是不会识别你的jQuery语句的。

还有一个原因，就是最下面的return false ，包含在form.on内，少了这个他就会直接跳转，虽然数据提交了，结果返回了，但是跳转并不是你想要的，而且所有的提示都会消失，不起作用。

其他的就正常使用就可以了