当前位置： 移动技术网 > IT编程>开发语言>JavaScript > layui 自定义表单验证的几个实例

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

2019年03月23日  | 移动技术网IT编程  | 我要评论

 

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

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网