首页 > 代码库 > 数据校验validator 与 DWZ
数据校验validator 与 DWZ
在做系统时经常会用到数据校验,数据校验可以自己写,也可以用现在成的,现在记录下两种类库使用方法,
validator
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="<%=keywords%>"> <meta http-equiv="description" content="<%=description%>"> <META http-equiv="X-UA-Compatible" content="IE=10" > <!--加载jquery类--> <script src=http://www.mamicode.com/"http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>>
用data-rule设置数据校验的格式,如要加新的校验类型只要在 zh_CN.js文件中添加正则表达式即可。
如下(部分代码)
rules: { digits: [/^\d+$/, "请输入整数数字"] ,doubles:[/^[0-9]*[.]{0,1}[0-9]*$/,"请输入数字"] ,positiveinteger:[/^[1-9][0-9]*$/,"请输入正整数"] ,letters: [/^[a-z]+$/i, "{0}只能输入字母"] ,tel: [/^(?:(?:1[3-9]\d{9})|(?:0\d{2,3}[- ]?[1-9]\d{6,7})|(?:[48]00[- ]?[1-9]\d{6}))$/, "联系电话格式不正确"] ,mobile: [/^1[3-9]\d{9}$/, "手机号格式不正确"] ,email: [/^(?:[a-z0-9]+[_\-+.]?)*[a-z0-9]+@(?:([a-z0-9]+-?)*[a-z0-9]+\.)+([a-z]{2,})+$/i, "邮箱格式不正确"] ,qq: [/^[1-9]\d{4,}$/, "QQ号格式不正确"] ,date: [/^\d{4}-\d{1,2}-\d{1,2}$/, "请输入正确的日期,例:yyyy-mm-dd"] ,time: [/^([01]\d|2[0-3])(:[0-5]\d){1,2}$/, "请输入正确的时间,例:14:30或14:30:00"] ,ID_card: [/^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[A-Z]|\d{3}[a-z])$/, "请输入正确的身份证号码"] ,url: [/^(https?|ftp):\/\/[^\s]+$/i, "网址格式不正确"] ,postcode: [/^[1-9]\d{5}$/, "邮政编码格式不正确"] ,chinese: [/^[\u0391-\uFFE5]+$/, "请输入中文"] ,contentsixty: [/^.[1-60]+$/, "不于大于60个字"] ,username: [/^\w{3,12}$/, "请输入3-12位数字、字母、下划线"] ,password: [/^[0-9a-zA-Z]{6,16}$/, "密码由6-16位数字、字母组成"] ,accept: function (element, params){ if (!params) return true; var ext = params[0]; return (ext === '*') || (new RegExp(".(?:" + (ext || "png|jpg|jpeg|gif") + ")$", "i")).test(element.value) || this.renderMsg("只接受{1}后缀", ext.replace('|', ',')); } } });
2.DWZ数据校验html代码如下
<html> <head> <title>validate</title> <style> span.error { overflow: hidden; width: 165px; height: 21px; padding: 0 3px; line-height: 21px; background: #F00; color: #FFF; top: 5px; left: 318px; } input.required, textarea.required { background-position:100% 0;} .textInput, input.focus, input.required, input.error, input.readonly, input.disabled, textarea.focus, textarea.required, textarea.error, textarea.readonly, textarea.disabled { background: url(themes/azure/images/form/input_bg.png) right no-repeat scroll; } </style> <!-- <link href=http://www.mamicode.com/"themes/default/style.css" rel="stylesheet" type="text/css" media="screen"/>>
效果也挺好,但是个人还是比较喜欢第一种,用着方便,可能用的比较多的原因。数据校验validator 与 DWZ
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。