先贴一个示例代码
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内,少了这个他就会直接跳转,虽然数据提交了,结果返回了,但是跳转并不是你想要的,而且所有的提示都会消失,不起作用。
其他的就正常使用就可以了