layui 自定义表单验证的几个实例

博客介绍了使用方法需先引入layui依赖的layu.js和layui.css,包含HTML、JS文件内容,还提及自定义函数验证,有带请求的函数判断(如验证名称是否重复)和普通函数验证。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

 

*注:使用本方法请先引入layui依赖的layu.js和layui.css

1.html

<input type="text" name="costbudget" lay-verify="required|validateMoney" placeholder="请输入" autocomplete="off" class="layui-input">

2.js文件

<script type="text/javascript">
  layui.use('form', function () {
  var form = layui.form;
 
  //自定义表单验证(金额)
  form.verify({
    validateMoney: [
      /^[+]{0,1}(\d+)$/ //正则表达式
      ,'金额只能为正整数' //提示信息
    ] 
  });

  //自定义表单验证(地址链接)
  form.verify({
    address: [
      /^((ht|f)tps?):\/\/[\w\-]+(\.[\w\-]+)+([\w\-\.,@?^=%&:\/~\+#]*[\w\-\@?^=%&\/~\+#])?$/
      ,'请输入正确的地址链接,如:https://www.baidu.com/'
    ] 
  });
</script>

3.自定义函数验证

(1).带请求的函数判断: 比如验证名称是否重复

    form.verify({
            'unique' : function(value, item) {
                var checkValue = value.trim();
                var checkResult='';
                $.ajax({
                    url : '/bomManage/checkBomCode',
                    type : 'POST',
                    data : {
                        "newBomCode" : checkValue
                    },
                    datatype : 'json',
                    async : false,
                    success : function(result) {
                        if (!result) {
                            checkResult='BOM编号重复'
                        }
                    },
                    error : function() {
                        kok.message("BOM编号验证失败")
                    }
                });
                return checkResult
            }
        })

(2).普通函数验证

form.verify({
            validateMoney: function (value) {
                var result = validateMoney(value);
                if (result != "Y") {
                    return result;
                }
            }
        });

  function validateMoney(money) {
        var reg = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/;
        if (reg.test(money)) {
            return "Y";
        }
        return "请输入正确的金额,且最多两位小数!";
    }

 

转载于:https://www.cnblogs.com/yysbolg/p/10576191.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值