Layui form 表单验证lay-verify的使用 和自定义验证及常用正则表达式

layui 表单自带校验
lay-verify:表单验证的关键字
有以下值供选择:

required (必填项)
phone(手机号)
email(邮箱)
url(网址)
number(数字)
date(日期)
identify(身份证)
自定义值

layui支持多条规则的验证:
格式:lay-verify=”验证1|验证2”
如:lay-verify=”required|phone|number”

自定义验证 :

1.验证数值是否符合规范

密码:<input id="password" class="lauui-input"></input>
确认密码:<input class="lauui-input" lay-verify="required|pwd"></input>



 //form自定义验证
 			
form.verify({
	//密码的验证
    pwd: function (value) {
        debugger
        var pwd = $('#password').val();
        if(pwd !=value){
        return "两次输入密码不一致";
        }
    },
});

2.必要的赋值

 <input name = "selectvalueText" id = "selectvalueText" >
 <select id="companyLevelCon" name="selectvalue" lay-verify="required|select"></select>

form.verify({
	//密码的验证
    select: function (value) {
        debugger
        if(value==""){
			return "请选择";
		}else{
		var text=  $("#ddlregtype").find("option:selected").text();
		$("#selectvalueText").val(selectvalueText)
		}
 	},
});
3.其他功能

常用正则表达式

value即为正则表达式 text为表达式对应含义

<select class="form-control reglist_select" id="regList">
    <option value="">-- 常用正则表达式 --</option>
    <optgroup label="常用字符">
        <option value="/[\u4e00-\u9fa5]/gm">匹配中文字符</option>
        <option value="/[^\x00-\xff]/igm">匹配双字节字符</option>
        <option value="/(^\s*)|(\s*$)/">匹配行尾行首空白</option>
        <option value="/^\d+$/">只能输入数字</option>
        <option value="/^\d{n}$/">只能输入n个数字</option>
        <option value="/^\d{n,}$/">至少输入n个以上的数字</option>
        <option value="/^\d{m,n}$/">只能输入m到n个数字</option>
        <option value="/^[a-z]+$/i">只能由英文字母组成</option>
        <option value="/^[A-Z]+$/">只能由大写英文字母组成</option>
        <option value="/^[a-z0-9]+$/i">只能由英文和数字组成</option>
        <option value="/^\w+$/">只能由英文、数字、下划线组成</option>
    </optgroup>
    <optgroup label="常用表单">
        <option value="/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/">匹配Email地址</option>
        <option value="/^https?:\/\/(([a-zA-Z0-9_-])+(\.)?)*(:\d+)?(\/((\.)?(\?)?=?&?[a-zA-Z0-9_-](\?)?)*)*$/i">匹配URL地址</option>
        <option value="/^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/">匹配手机号码</option>
        <option value="/^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/">匹配身份证号</option>
        <option value="/^[1-9]\d{5}(?!\d)$/">匹配邮编号</option>
        <option value="/^[1-2][0-9][0-9][0-9]-[0-1]{0,1}[0-9]-[0-3]{0,1}[0-9]$/">匹配日期(yyyy-MM-dd)</option>
    </optgroup>
    <optgroup label="浏览器navigator.userAgent">
        <option value="/msie (\d+\.\d+)/i">从UA判断是否为IE浏览器</option>
        <option value="/webkit/i">从UA判断是否为webkit内核</option>
        <option value="/chrome\/(\d+\.\d+)/i">从UA判断是否为chrome浏览器</option>
        <option value="/firefox\/(\d+\.\d+)/i">从UA判断是否为firefox浏览器</option>
        <option value="/opera(\/| )(\d+(\.\d+)?)(.+?(version\/(\d+(\.\d+)?)))?/i">从UA判断是否为opera浏览器</option>
        <option value="/(\d+\.\d)?(?:\.\d)?\s+safari\/?(\d+\.\d+)?/i">从UA判断是否为Safari浏览器</option>
        <option value="/android/i">从UA中判断是否为Android系统</option>
        <option value="/ipad/i">从UA中判断是否为iPad</option>
        <option value="/iphone/i">从UA中判断是否为iPhone</option>
        <option value="/macintosh/i">从UA判断是否为Mac OS平台</option>
        <option value="/windows/i">从UA中判断是否为Windows平台</option>
        <option value="/(nokia|iphone|android|ipad|motorola|^mot\-|softbank|foma|docomo|kddi|up\.browser|up\.link|htc|dopod|blazer|netfront|helio|hosin|huawei|novarra|CoolPad|webos|techfaith|palmsource|blackberry|alcatel|amoi|ktouch|nexian|samsung|^sam\-|s[cg]h|^lge|ericsson|philips|sagem|wellcom|bunjalloo|maui|symbian|smartphone|midp|wap|phone|windows ce|iemobile|^spice|^bird|^zte\-|longcos|pantech|gionee|^sie\-|portalmmm|jig\s browser|hiptop|^ucweb|^benq|haier|^lct|opera\s*mobi|opera\*mini|320x320|240x320|176x220)/i">从UA中判断是否为移动终端</option>
    </optgroup>
    <optgroup label="HTML相关">
        <option value="/\<link\s(.*?)\s*(([^&]>)|(\/\>)|(\<\/link\>))/gi">匹配link标签</option>
        <option value="/<(\S*?) [^>]*>.*?</\1>|<.*?/>/gm">匹配HTML标签</option>
        <option value="/^[^<>`~!/@\#}$%:;)(_^{&*=|'+]+$/">匹配非HTML标签</option>
        <option value="/<script[^>]*>[\s\S]*?<\/[^>]*script>/gi">匹配script标签</option>
        <option value="/<!--[\s\S]*?--\>/g">匹配HTML注释</option>
        <option value="/\[\s*if\s+[^\]][\s\w]*\]/i">匹配HTML条件注释</option>
        <option value="/^\[if\s+(!IE|false)\]>.*<!\[endif\]$/i">匹配非IE的条件注释</option>
        <option value="/expression[\s\r\n ]?\(/gi">匹配CSS expression</option>
        <option value="/<\W+>/gi">匹配不合法的HTML标签</option>
        <option value="/<textarea[^>]*>[\s\S]*?<\/[^>]*textarea>/gi">匹配textarea标签</option>
    </optgroup>
</select>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值