layui 表单自定义验证不生效的问题

缺乏、安全感 2023-05-29 05:15 73阅读 0赞

推荐必看：[https://blog.csdn.net/persistencegoing/article/details/84376427][https_blog.csdn.net_persistencegoing_article_details_84376427]

**1.form 需在div 内部**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlcnNpc3RlbmNlZ29pbmc_size_16_color_FFFFFF_t_70][]

**2.导入相应js和css**

![20191104161830287.png][]

**3.标签**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlcnNpc3RlbmNlZ29pbmc_size_16_color_FFFFFF_t_70 1][]

**4.自定义验证使用**

layui.use(\['form'\], function () \{  
        var form = layui.form;  
        //要放在form.on上面，千万不能放在提交步骤中，否则会不触发  
        form.verify(\{

realName: function(value) \{

//判断这个值，逻辑代码

\},

digital: \[  
                /^\[0-4\]\*$/  
                ,'请填入0-4的分数'  
            \]  
        \});

//提交按钮触发  
        form.on("submit(submit\_button)", function (data) \{  
            return false;  
        \});  
    \});

**5.自带的验证标签**

phone:\[/(^$)|^1\\d\{10\}$/,'请输入正确的手机号'\],  
email:\[/(^$)|^(\[a-zA-Z0-9\_\\.\\-\])+\\@((\[a-zA-Z0-9\\-\])+\\.)+(\[a-zA-Z0-9\]\{2,4\})+$/,'邮箱格式不正确'\],  
url:\[/(^$)|(^\#)|(^http(s\*):\\/\\/\[^\\s\]+\\.\[^\\s\]+)/,'链接格式不正确'\],  
number:\[/(^$)|^\\d+$/,'只能填写数字'\],  
date:\[/(^$)|^(\\d\{4\})\[-\\/\](\\d\{1\}|0\\d\{1\}|1\[0-2\])(\[-\\/\](\\d\{1\}|0\\d\{1\}|\[1-2\]\[0-9\]|3\[0-1\]))\*$/,'日期格式不正确'\],  
identity:\[/(^$)|(^\\d\{15\}$)|(^\\d\{17\}(x|X|\\d)$)/,'请输入正确的身份证号'\]

博主强烈推荐：https://blog.csdn.net/persistencegoing/article/details/84376427

希望大家关注我一波,防止以后迷路,有需要的可以加群讨论互相学习java ,学习路线探讨,经验分享与java求职

群号:721 515 304

[https_blog.csdn.net_persistencegoing_article_details_84376427]: https://blog.csdn.net/persistencegoing/article/details/84376427
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlcnNpc3RlbmNlZ29pbmc_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191104161534845.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlcnNpc3RlbmNlZ29pbmc=,size_16,color_FFFFFF,t_70
[20191104161830287.png]: https://img-blog.csdnimg.cn/20191104161830287.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlcnNpc3RlbmNlZ29pbmc_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191104161930924.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlcnNpc3RlbmNlZ29pbmc=,size_16,color_FFFFFF,t_70