layui的form表单验证lay-verify
2022-01-31 16:34:53
<form class="layui-form" action="">
<div class="layui-form-item tm30">
<div class="">
<input type="text" name="name" id="name" lay-verify="required" lay-verType="tips" lay-reqText="请输入您的姓名" autocomplete="off" placeholder="请输入您的姓名" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="">
<input type="text" name="certid" id="certid" lay-verify="identity" autocomplete="off" placeholder="身份证号" lay-verType="tips" lay-reqText="请正确输入您的身份证号" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="">
<input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="接收单位支部名称(请务必填写准确)" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="">
<input type="text" name="tel" id="tel" lay-verify="phone" lay-verType="tips" lay-reqText="请正确输入您的手机号" autocomplete="off" placeholder="请填写长期有效的手机号码" class="layui-input">
</div>
</div>
<div class="layui-form-item tm30">
<button type="submit" class="layui-btn zzgxtj" lay-filter="formDemo" lay-submit="">立即提交</button>
</div>
</form>
<script type="text/javascript">
layui.use(['form'], function () {
var form = layui.form;
//自定义验证规则
form.verify({
title: function (value, item) {
if (value.length < 5) {
return '标题至少得5个字符啊';
}
}, fname: function (value) {
if (value.length < 4) {
return '请输入至少4位的用户名';
}
}, contact: function (value) {
if (value.length < 4) {
return '内容请输入至少4个字符';
}
}
, phone: [/^1[3|4|5|7|8]\d{9}$/, '手机必须11位,只能是数字!']
, email: [/^[a-z0-9._%-]+@([a-z0-9-]+\.)+[a-z]{2,4}$|^1[3|4|5|7|8]\d{9}$/, '邮箱格式不对']
});
//监听提交
form.on('submit(formDemo)', function(data){
//ajax
//console.log(data.elem) //被执行事件的元素DOM对象,一般为button对象
//console.log(data.form) //被执行提交的form对象,一般在存在form标签时才会返回
console.log(data.field) //当前容器的全部表单字段,名值对形式:{name: value};获取单个值data.field["title"]
return false; //阻止表单跳转。如果需要表单跳转,去掉这段即可。
});
});
</script>
<div class="layui-form-item tm30">
<div class="">
<input type="text" name="name" id="name" lay-verify="required" lay-verType="tips" lay-reqText="请输入您的姓名" autocomplete="off" placeholder="请输入您的姓名" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="">
<input type="text" name="certid" id="certid" lay-verify="identity" autocomplete="off" placeholder="身份证号" lay-verType="tips" lay-reqText="请正确输入您的身份证号" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="">
<input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="接收单位支部名称(请务必填写准确)" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="">
<input type="text" name="tel" id="tel" lay-verify="phone" lay-verType="tips" lay-reqText="请正确输入您的手机号" autocomplete="off" placeholder="请填写长期有效的手机号码" class="layui-input">
</div>
</div>
<div class="layui-form-item tm30">
<button type="submit" class="layui-btn zzgxtj" lay-filter="formDemo" lay-submit="">立即提交</button>
</div>
</form>
<script type="text/javascript">
layui.use(['form'], function () {
var form = layui.form;
//自定义验证规则
form.verify({
title: function (value, item) {
if (value.length < 5) {
return '标题至少得5个字符啊';
}
}, fname: function (value) {
if (value.length < 4) {
return '请输入至少4位的用户名';
}
}, contact: function (value) {
if (value.length < 4) {
return '内容请输入至少4个字符';
}
}
, phone: [/^1[3|4|5|7|8]\d{9}$/, '手机必须11位,只能是数字!']
, email: [/^[a-z0-9._%-]+@([a-z0-9-]+\.)+[a-z]{2,4}$|^1[3|4|5|7|8]\d{9}$/, '邮箱格式不对']
});
//监听提交
form.on('submit(formDemo)', function(data){
//ajax
//console.log(data.elem) //被执行事件的元素DOM对象,一般为button对象
//console.log(data.form) //被执行提交的form对象,一般在存在form标签时才会返回
console.log(data.field) //当前容器的全部表单字段,名值对形式:{name: value};获取单个值data.field["title"]
return false; //阻止表单跳转。如果需要表单跳转,去掉这段即可。
});
});
</script>