layui框架实战案例(11):表单自定义验证规则

简介: layui框架实战案例(11):表单自定义验证规则

验证代码lay-verify=“user_agree”

            <div class="layui-form-item">
                <label for="user_phone" class="layui-form-label" style="width: 20%;"></label>
                <div class="layui-input-inline">
                    <input type="radio" id="user_agree" name="user_agree" value="1" lay-skin="primary" lay-verify="user_agree" title="我已经阅读并接受">
                </div>
                <div class="layui-form-mid layui-word-aux" style="margin-left: -50px;"><a href="index.php?m=Pop&a=privacy" target="_blank">《隐私政策》</a> <a href="index.php?m=Pop&a=agreement" target="_blank">《用户协议》</a><a href="index.php?m=Pop&a=sensitive" target="_blank">《敏感个人信息授权书》</a></div>
            </div>


验证函数

        //自定义验证规则
        form.verify({
            user_card: [/(^\d{15}$)|(^\d{17}(x|X|\d)$)/, "请输入正确的18位身份证号"]
            , user_phone: [/^1[3|4|5|6|7|8|9]\d{9}$/, '手机必须11位,只能是数字!']
            , smscode: [/^\d{6}$/, "验证码为6位数且5分钟内有效"]
            , pass: [/(.+){6,12}$/, '密码必须6到12位']
            , user_agree: function () {
                if ($('input[name="user_agree"]:checked').val() != 1) {
                    return '必须通过服务条款《隐私政策》、《用户协议》 、《敏感个人信息授权书》';
                }
            }
            , repass: function () {
                if ($('#L_pass').val() != $('#L_repass').val()) {
                    return '两次密码不一致';
                }
            }
        });


@lockdata.cn

相关文章
|
6月前
uniapp的form表单自定义验证规则
uniapp的form表单自定义验证规则
265 0
|
JavaScript
VUE element-ui之form表单自定义验证11位手机号码(封装验证规则)
VUE element-ui之form表单自定义验证11位手机号码(封装验证规则)
3457 0
VUE element-ui之form表单自定义验证11位手机号码(封装验证规则)
|
2月前
|
缓存 前端开发 数据可视化
前端基础(七)_表单的基本组成与使用
本文详细介绍了HTML表单的基本组成和使用,包括`<form>`标签、`<input>`表单域、`<select>`下拉列表、`<textarea>`多行文本域等元素。文章解释了表单的提交方式(GET和POST)、表单域的各种类型(文本、密码、单选按钮、复选框等)、提交按钮和重置按钮的作用,以及如何通过`<label>`标签提高表单的可访问性。此外,还讨论了表单元素的属性,如`readonly`、`disabled`、`maxlength`等。
31 1
|
3月前
|
前端开发 JavaScript
这篇文章介绍了如何使用form表单结合Bootstrap格式将前端数据通过action属性提交到后端的servlet,包括前端表单的创建、数据的一级和二级验证,以及后端servlet的注解和参数获取。
这篇文章介绍了使用AJAX技术将前端页面中表单接收的多个参数快速便捷地传输到后端servlet的方法,并通过示例代码展示了前端JavaScript中的AJAX调用和后端servlet的接收处理。
这篇文章介绍了如何使用form表单结合Bootstrap格式将前端数据通过action属性提交到后端的servlet,包括前端表单的创建、数据的一级和二级验证,以及后端servlet的注解和参数获取。
|
3月前
ElementUI——表单使用自定义验证导致无法提交
ElementUI——表单使用自定义验证导致无法提交
28 2
|
3月前
|
JavaScript 前端开发 数据安全/隐私保护
Vue.js 表单处理技巧大揭秘!v-model 与自定义验证综合运用,打造高效表单处理体验!
【8月更文挑战第31天】Vue.js 是一款备受欢迎的前端框架,其表单处理功能强大且灵活。v-model 指令可实现双向数据绑定,简化表单元素值与 Vue 实例数据的同步过程;结合自定义验证规则,则能确保用户输入数据符合特定要求。无论是简单的单字段校验还是复杂的多字段验证,Vue.js 均提供了简洁有效的解决方案,有效提升了表单处理效率及用户体验。通过综合运用 v-model 和自定义验证,开发者能够实时反馈错误信息并控制表单状态,从而增强应用的交互性与可靠性。
58 0
|
4月前
|
小程序 C++
【微信小程序-原生开发】实用教程19 - 表单范例 VS 表单校验(含必填校验函数封装,实时数字校验)
【微信小程序-原生开发】实用教程19 - 表单范例 VS 表单校验(含必填校验函数封装,实时数字校验)
86 0
|
数据安全/隐私保护
fastadmin中写接口是时Validate规则验证自定义如何用
fastadmin中写接口是时Validate规则验证自定义如何用
230 0
|
6月前
|
JavaScript 前端开发 数据安全/隐私保护
jQuery最方便的前端验证方式2种(非空验证与比较验证)
jQuery最方便的前端验证方式2种(非空验证与比较验证)
98 0
|
SQL 前端开发 API
layui框架实战案例(17):流加载文档layui.flow组件的前后端解决方案
layui框架实战案例(17):流加载文档layui.flow组件的前后端解决方案
182 0