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

时间:2023-03-08 16:01:06

*注:使用本方法请先引入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 "请输入正确的金额,且最多两位小数!";
}