1. 程式人生 > >layui 自定義表單驗證的幾個實例

layui 自定義表單驗證的幾個實例

manage ror ida div nbsp ace pla for trim

*註:使用本方法請先引入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 "請輸入正確的金額,且最多兩位小數!";
    }

layui 自定義表單驗證的幾個實例