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

 

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