layui 自定义校验整数,分数,电话等内容

layui在使用中,内置的条件判断不足以满足我们使用的情景,这时候需要我们自己写一些校验

1,页面用法:lay-verify=“validateInteger” ,而validateInteger 在js里面定义

<input type="tel" name="" autocomplete="off" class="layui-input" lay-verify="validateInteger"
										 value="${}" maxlength="8" placeholder="请输入">

2,定义validateInteger以及其他内容

layui.use(['form', 'layedit', 'laydate','upload'], function() {
	var form = layui.form,
			layer = layui.layer,
			layedit = layui.layedit,
			upload = layui.upload,
			laydate = layui.laydate;
	//判断整数
	form.verify({
		validateInteger:function(value, item){
			if(value==''){
				return '';
			} else{
				var ver =/^[1-9]\d*$/;
				if (!ver.test(value)) {
					return '请填写正整数';
				}
			}
		},
		validateDecimal:function(value, item){
			if(value==''){
				return '';
			} else{
				var ver =/^[0-9]+(\.[0-9])?$|^0\.[0-9]$/;
				if (!ver.test(value)) {
					return '请填写正确的分数,小数点后保留一位';
				}
			}
		},
		validatePhone: function (value) {
			if(value==''){
				return '';
			}
			var mobile = /^1[3-9]\d{9}$/; // 手机号码验证
			var flag = mobile.test(value) ;
			if(!flag){
				return '请输入正确的手机号';
			}
		},
		validateIdCard: function (value) {
			var isCard = CheckIdCardField(value) ;
			if(!isCard){
				return '请输入正确的身份证号';
			};
		},
	});
		});
  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
好的,关于 layui 表单校验,你可以参考以下代码: ```html <form class="layui-form" action=""> <div class="layui-form-item"> <label class="layui-form-label">用户名</label> <div class="layui-input-block"> <input type="text" name="username" required lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">密码</label> <div class="layui-input-block"> <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <div class="layui-input-block"> <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button> <button type="reset" class="layui-btn layui-btn-primary">重置</button> </div> </div> </form> <script> //JavaScript代码区域 layui.use('form', function(){ var form = layui.form; //监听提交 form.on('submit(formDemo)', function(data){ layer.msg(JSON.stringify(data.field)); return false; }); }); </script> ``` 其中,`lay-verify` 属性用于指定校验规则,`required` 表示必填项。在 JavaScript 中,我们可以通过 `form.verify()` 方法来自定义校验规则。例如: ```javascript //自定义校验规则 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 '用户名不能全为数字'; } }, password: [/^[\S]{6,12}$/,'密码必须6到12位,且不能出现空格'] }); ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

凉梦lm

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值