好久没有更博了年底了 项目太忙
分享一个最近在写的插件
前端验证表单，验证不通过报错
写的时间仓促，可能会有bug。。。恳请指正，已加完善
页面中的的dom结构为
<div class="rows employee-name">
<label class="form-label">姓名：</label>
<div class="input-box">
<input class="form-input verify" data-verify="require" type="text" placeholder="请输入姓名">
</div>
</div>搭配css
.rows {
width: 400px;
overflow: hidden;
margin-bottom: 10px;
}
.rows .form-label {
float: left;
width: 50%;
text-align: center;
color: black;
}
.rows .input-box {
float: left;
width: 50%;
}
.rows .input-box input[type=text].form-input,
.rows .input-box input[type=password].form-input {
width: 100%;
}
.input-box input.form-input {
width: auto;
height: auto;
float: left;
}
.rows .input-box span.form-radio {
width: 50%;
float: left;
}
.error-text {
color: red;
text-align: left;
}
.has-error .form-input {
border-color: #a94442;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
}
.has-error .form-input:focus {
border-color: #843534;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #ce8483;
box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #ce8483;
}
.has-error .form-label {
color: #a94442;
}上个html的demo
<div class="rows employee-name">
<label class="form-label">姓名：</label>
<div class="input-box">
<input class="form-input verify" data-verify="require" type="text" placeholder="请输入姓名">
</div>
</div>
<div class="rows employee-password">
<label class="form-label">密码：</label>
<div class="input-box">
<input class="form-input verify" data-verify="require password" type="password" name="password" placeholder="请输入密码">
</div>
</div>
<div class="rows employee-passwordCon">
<label class="form-label">重复密码：</label>
<div class="input-box">
<input class="form-input verify" data-verify="require password-confirm" type="password" name="password" placeholder="请输入重复密码">
</div>
</div>
<div class="rows employee-gender">
<label class="form-label">性别：</label>
<div class="input-box">
<span class="form-radio">
<input class="form-input verify" data-verify="require" type="radio" name="gender" value="男" />男
</span>
<span class="form-radio">
<input class="form-input verify" data-verify="require" type="radio" name="gender" value="女" />女
</span>
</div>
</div>
<div class="rows employee-salary">
<label class="form-label">工资：</label>
<div class="input-box">
<input class="form-input verify" data-verify="all-number" type="text" name="salary" placeholder="请输入工资">
</div>
</div>
<div class="rows employee-phone">
<label class="form-label">电话：</label>
<div class="input-box">
<input class="form-input verify" data-verify="phone" type="text" name="phone" placeholder="请输入电话">
</div>
</div>
<div class="rows employee-mail">
<label class="form-label">邮箱：</label>
<div class="input-box">
<input class="form-input verify" data-verify="mail" type="text" name="mail" placeholder="请输入邮箱">
</div>
</div>
<div class="rows employee-verifyCode">
<label class="form-label">验证码：</label>
<div class="input-box">
<input class="form-input verify" data-verify="custom" data-rule="^\d{6}$" data-text="输入错误" type="text" name="mail" placeholder="请输入验证码">
</div>
</div>
<div class="rows">
<label class="form-label">身份证号：</label>
<div class="input-box">
<input class="form-input verify" data-verify="identity" type="text" name="identity" placeholder="请输入身份证号">
</div>
</div>
<div class="rows">
<label class="form-label">银行卡号：</label>
<div class="input-box">
<input class="form-input verify" data-verify="require number bank-card" type="text" name="bankCard" placeholder="请输入银行卡号">
</div>
</div>
<div class="rows">
<label class="form-label">出生日期：</label>
<div class="input-box">
<input class="form-input verify" data-verify="date" data-rule="-" data-text="日期格式错误" type="text" name="date" placeholder="请输入出生日期" />
</div>
</div>
<div class="rows">
<label class="form-label">只有上限：</label>
<div class="input-box">
<input class="form-input verify" data-verify="number inputLength" data-max="20" type="text" name="company" placeholder="请输入公司名称">
</div>
</div>
<div class="rows">
<label class="form-label">只有下线：</label>
<div class="input-box">
<input class="form-input verify" data-verify="number inputLength" data-min="5" type="text" name="workPlace" placeholder="请输入工作地点">
</div>
</div>
<div class="rows">
<label class="form-label">长度限制：</label>
<div class="input-box">
<input class="form-input verify" data-verify="require inputLength" data-min="5" data-max="10" type="text" name="workPlace" placeholder="请输入工作地点">
</div>
</div>
<div class="rows employee-city">
<label class="form-label">城市：</label>
<div class="input-box">
<select class="form-input verify" data-verify="require" name="employee-city">
<option></option>
<option value="0">北京</option>
<option value="1">上海</option>
<option value="2">广州</option>
<option value="3">深圳</option>
</select>
</div>
</div>关键来了js代码
// 验证使用规则：
// 第一个参数是 是否必填require 选填可以不写
// 支持多种验证类型判断，中间以空格分开就可以
// 现在支持的种类有：
// 1.password 密码;
//<input class="verify" data-verify="require password" data-name="密码" data-ajax="1" type="password" >
//data-name是报错的时候XX不能为空的那个XX，若是选填的话，可以不写这个 data-ajax是是否去后台验证的参数，0或者不写是不需要后台判断密码强度，1是需要后台判断密码强度
// 2.password-confirm 重复密码；
//<input class="verify" data-verify="require password-confirm" data-name="重复密码密码" type="password" >
//密码和重复密码的两个input的name有要求，重复密码的name必须是密码的name前加‘confirm_’如name='new-password' name='confirm_new-password'
// 3.number正整数；
//<input class="verify" data-verify="number" type="text" >
// 4.float两位正小数；
//<input class="verify" data-verify="float" type="text" >
// 5.all-number正负两位小数；
//<input class="verify" data-verify="all-number" type="text" >
// 6.phone手机号；
//<input class="verify" data-verify="phone" type="text" >
// 7.email邮箱；
//<input class="verify" data-verify="email" type="text" >
// 8.verfiy-code验证码；
//<input class="verify" data-verify="verfiy-code" type="text" >
// 9.identity身份证；
//<input class="verify" data-verify="identity" type="text" >
// 10.bank-card银行卡；
//<input class="verify" data-verify="bank-card" type="text" >
// 11.input-length长度限制；
// 只有上限；只有下限；有上下限；
//<input class="verify" data-verify="input-length" data-max="20" type="text" >//只有上限
//<input class="verify" data-verify="input-length" data-min="2" type="text" >//只有下限
//<input class="verify" data-verify="input-length" data-min="2" data-max="20" type="text" >//上下限
// 12.custom自定义验证规则和提示文字；
//<input class="verify" data-verify="custom" data-rule="/^[a-zA-Z]{1,3}$/" data-text="输入错误" type="text" >
// 13.date日期强转2012-01-01形式;
//<input class="verify" data-verify="date" type="text" >
// 14.org-code组织机构代码证;
//<input class="verify" data-verify="org-code" type="text" >
$(".verify").blur(function(){
verifyForm($(this));
});
function verifyForm (obj){
var verifyType = $(obj).data("verify");//验证类型
var verifyName = $(obj).data("name");//验证提示项目名称
var objVal = $.trim($(obj).val());//值
var parent = $(obj).parents(".input-box");//父级元素
var grandfather = $(obj).parents(".rows");//祖先元素
if(verifyType == "require"){
//必填项
require();
}else {
var args = verifyType.split(" ");
if(args[0] == "require"){
//必填
if(require() != false){
eachCheck(args,true);
}
}else{
//选填
//执行之后的验证
if(objVal){
eachCheck(args,false);
}else {
clearError();
return true;
}
}
}
//循环验证填入项
function eachCheck(args, require){
var i = 0;
var len = args.length;
if(require == true){
i = 1;
}
for(; i < len; i++){
if(args[i] == "password"){//密码
passwordCheck();
}else if(args[i] == "password-original"){
passwordOriginalCheck();
}else if(args[i] == "password-confirm"){
if(!passwordConfirmCheck()){//重复密码
break;
}
}else if(args[i] == "number"){//整数
if(!regularCheck(/^\d*$/,"输入必须是数字！")){
break;
}
}else if(args[i] == "float"){//两位小数
if(!regularCheck(/^[0-9]+(.[0-9]{2})?$/,"输入必须是数字,支持最多两位小数！")){
break;
}
}else if(args[i] == "all-number"){//正负两位小数
if(!regularCheck(/^[+-]?\d*\.?\d{0,2}$/,"输入必须是数字,支持负数,支持最多两位小数！")){
break;
}
}else if(args[i] == "verify-code"){//验证码
if(!regularCheck(/^\d{6}$/,"验证码输入有误！")){
break;
}
}else if(args[i] == "identity"){//身份证
if(!regularCheck(/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,"身份证号应该包含18个字符！")){
break;
}
}else if(args[i] == "bank-card"){//银行卡号
if(!regularCheck(/^\d{15,20}$/,"银行卡号格式错误！")){
break;
}
}else if(args[i] == "telephone"){//固定电话
if(!regularCheck(/^\d{3,4}-\d{7,8}$/,"固定电话格式错误！")){
break;
}
}else if(args[i] == "org-code"){//银行卡号
if(orgcodevalidate()){
showError("组织机构代码证输入错误");
return false;
}else {
clearError();
return true;
}
}else if(args[i] == "custom"){//自定义验证规则
var rule_input = $(obj).data("rule");
var text = $(obj).data("text");
var rule = new RegExp(rule_input);
if(!regularCheck(rule,text)){
break;
}
}else if(args[i] == "input-length") {//长度限制
//验证的是字符不限数字
var max = $(obj).data("max");
var min = $(obj).data("min");
if(max && !min){
//只有上限
inputLengthCheck("max", max);
}else if(!max && min){
//只有下线
inputLengthCheck("min", min);
}else if(max && min){
inputLengthCheck("min", min, max);
}
}else if(args[i] == "phone"){//手机号
if(!regularCheck(/^1[3-9][0-9]\d{4,8}$/,"请输入正确手机号！")){
break;
}else {
//格式正确,验证是否后台有该手机号码
var verifyAjax = Number($(obj).data("ajax"));//0 否 1 是
if(verifyAjax == 0 || verifyAjax == undefined){
//不用去验证
clearError();
return true;
}else if(verifyAjax == 1){
//后台判重
commonAjax("phone");
}
}
}else if(args[i] == "email"){//邮箱
if(!regularCheck(/^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$/,"请输入正确邮箱！")){
break;
}else {
//格式正确,验证是否后台有该邮箱号
var verifyAjax = Number($(obj).data("ajax"));//0 否 1 是
if(verifyAjax == 0 || verifyAjax == undefined){
//不用去验证
clearError();
return true;
}else if(verifyAjax == 1){
//后台判重
commonAjax("email");
}
}
}else if(args[i] == "date"){//日期格式
dateCheck();
}
}
}
//验证必填项 radio也要验证
function require(){
if($(obj).attr("type") == "radio"){
var radioName = $(obj).attr("name");
if(!$("input[name="+radioName+"]:checked").val()){
showError("请选择！");
return false;
}else {
clearError();
return true;
}
}else {
if(objVal == ""){
showError(verifyName + "不能为空！");
return false;
}else {
clearError();
return true;
}
}
}
//规则验证 公司名称 密码 小数数字 整数 正负小数 手机号码 邮箱 验证码 身份证号 银行卡号 长度限制 自定义规则
function regularCheck(rule, text){
if(!rule.test(objVal)){
showError(text);
return false;
}else {
clearError();
return true;
}
}
//密码验证
function passwordCheck(){
//密码验证和重复密码验证绑定
var name = $(obj).attr("name");
var pwd = $("input[name="+name+"]").val();
var pwd_cfm = $("input[name=confirm_"+name+"]").val();
var verifyAjax = Number($(obj).data("ajax"));//0 否 1 是
if(pwd && !pwd_cfm){
//没有输入重复密码
//正常验证
if(regularCheck(/^[0-9a-zA-Z]{8,20}$/,"密码应为8-20位字符！")){
//前端验证通过,判断是否要去后端验证
if(verifyAjax == 0 || verifyAjax == undefined){
//验证通过
clearError();
return true;
}else if(verifyAjax == 1){
//ajax
passwordAjax();
}
}else {
return false;
}
}else if(pwd && pwd_cfm){
//都存在
//先验证密码位数
if(regularCheck(/^[0-9a-zA-Z]{8,20}$/,"密码应为8-20位字符！")){
//密码位数验证通过
//ajax here
//前端验证通过,判断是否要去后端验证
if(verifyAjax == 0 || verifyAjax == undefined){
//验证通过
//验证两次密码是否一致
var another_parent = $("input[name="+name+"]").parents(".input-box");
var another_grandfather = $("input[name=confirm_"+name+"]").parents(".rows");
if(pwd != pwd_cfm){
//两次不一致，焦点移到confirm并报错
another_parent.find(".error-text").remove();
var error = $("<div class='error-text'></div>");
error.text("两次输入密码不一致！");
another_parent.append(error);
another_grandfather.addClass("has-error");
return false;
}else{
//密码一致，没问题，清除报错信息
clearError();
another_parent.find(".error-text").remove();
another_grandfather.removeClass("has-error");
return true;
}
}else if(verifyAjax == 1){
//ajax
passwordAjax(true);
}
}
}
}
//日期格式验证
function dateCheck(){
var rule = $(obj).data("rule") || "-";
var dates = objVal.split(rule);
var year;
var month;
var day;
if(dates[0].length == 4){
//2015
year = dates[0];
var mm = Number(dates[1]);
var dd = Number(dates[2]);
//月份判断
if(mm > 0 && mm < 10){
month = "0" + dates[1];
}else if(mm == 10 || mm == 11 || mm == 12){
month = dates[1];
}else {
showError("日期格式不对!");
return false;
}
//日期判断
if(mm == 1 || mm == 3 || mm == 5 || mm == 7 || mm == 8 || mm == 10 || mm == 12){
if(dd > 0 && dd < 32){
if(dd < 10){
//补位
day = "0" + dd;
}else {
day = dates[2];
}
}else {
showError("日期格式不对!");
return false;
}
}else if(mm == 4 || mm == 6 || mm == 9 || mm == 11){//小月
if(dd > 0 && dd < 31){
if(dd < 10){
//补位
day = "0" + dd;
}else {
day = dates[2];
}
}else {
showError("日期格式不对!");
return false;
}
}else if(mm == 2){//二月
if(dd > 0 && dd < 30){
if(dd < 10){
//补位
day = "0" + dd;
}else {
day = dates[2];
}
}else {
showError("日期格式不对!");
return false;
}
}else {
showError("日期格式不对!");
return false;
}
}else if(dates[0].length == 8){
//20151111
year = dates[0].substr(0,4);
month = dates[0].substr(4,2);
day = dates[0].substr(6,2);
//验证时间规则
if(month == "01" || month == "03" || month == "05" || month == "07" || month == "08" || month == "10" || month == "12"){
if(Number(day) <= 0 || Number(day) > 31){
//不通过
showError(text);
return false;
}
}else if(month == "04" || month == "06" || month == "09" || month == "11"){
if(Number(day) <= 0 || Number(day) > 30){
//不通过
showError(text);
return false;
}
}else if(month == "02"){
if(Number(day) <= 0 || Number(day) > 29){
//不通过
showError(text);
return false;
}
}else {
//不通过
showError(text);
return false;
}
}else {
//报错
showError("日期格式错误!");
return false;
}
var new_date = year + rule + month + rule + day;
$(obj).val(new_date);
clearError();
return true;
}
//密码重复验证
function passwordConfirmCheck(){
var name = $(obj).attr("name");
var pwd = $("input[name="+name.substr(8)+"]").val();
if(pwd){
if(pwd != objVal){
showError("两次输入密码不一致！");
return false;
}else {
clearError();
return true;
}
}else{
showError("请先输入密码！");
return false;
}
}
//原始密码验证
function passwordOriginalCheck(){
$.ajax({
type: 'POST',
url: '',
data: "password="+ objVal + "&_csrf=" + $("meta[name=csrf-token]").attr("content"),
success: function (data) {
if(!data.status){
//原始密码错误
showError("原始密码输入错误!");
return false;
}else {
//原始密码正确
clearError();
return true;
}
}
});
}
//验证组织机构合法性方法
//value是组织机构的值 如XXXXXXXX-X格式
//false 就是组织机构代码是对的
//true 组织机构代码不合法
function orgcodevalidate(){
if(objVal){
var values = objVal.split("-");
var ws = [3, 7, 9, 10, 5, 8, 4, 2];
var str = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ';
var reg = /^([0-9A-Z]){8}$/;
if (!reg.test(values[0])) {
return true
}
var sum = 0;
for (var i = 0; i < 8; i++) {
sum += str.indexOf(values[0].charAt(i)) * ws[i];
}
var C9 = 11 - (sum % 11);
var YC9=values[1]+'';
if (C9 == 11) {
C9 = '0';
} else if (C9 == 10) {
C9 = 'X' ;
} else {
C9 = C9+'';
}
return YC9!=C9;
}
}
//长度限制
function inputLengthCheck(){
if(objVal){
var type = arguments[0];
if(type == "min"){
//只有下线
if(objVal.length < arguments[1]){
var text = "最少输入"+arguments[1]+"个字符";
showError(text);
return false;
}else {
clearError();
return true;
}
}else if(type == "max"){
//只有上线
if(objVal.length > arguments[1]){
var text = "最多输入"+arguments[1]+"个字符";
showError(text);
return false;
}else {
clearError();
return true;
}
}else if(type == "min"){
//上下线
if(objVal.length < arguments[1] || objVal.length > arguments[2]){
var text = "输入"+arguments[1]+"~"+arguments[2]+"个字符";
showError(text);
return false;
}else {
clearError();
return true;
}
}
}
}
//密码的ajax后台判断
function passwordAjax(status){
var repassword = false;
if(status == true){
//清空重复密码
repassword = true;
}
$.ajax({
type: 'POST',
url: '',
data: "data[password]=" + objVal,
success: function (data) {
if(!data.status){
//密码强度不通过
showError(data.data.errors.password);
return false;
}else {
//通过
if(repassword == true){
//验证两次密码是否一致
var name = $(obj).attr("name");
var pwd = $("input[name="+name+"]").val();
var pwd_cfm = $("input[name=confirm_"+name+"]").val();
var another_parent = $("input[name=confirm_"+name+"]").parents(".input-box");
var another_grandfather = $("input[name=confirm_"+name+"]").parents(".rows");
if(pwd != pwd_cfm){
//两次不一致，焦点移到confirm并报错
another_parent.find(".error-text").remove();
var error = $("<div class='error-text'></div>");
error.text("两次输入密码不一致！");
another_parent.append(error);
another_grandfather.addClass("has-error");
return false;
}else{
//密码一致，没问题，清除报错信息
clearError();
another_parent.find(".error-text").remove();
another_grandfather.removeClass("has-error");
return true;
}
}else {
clearError();
return true;
}
}
}
});
}
//手机号码,邮箱的后台判断
function commonAjax(type){
$.ajax({
type: 'POST',
url: '',
data: "data[" + type + "]=" + objVal,
success: function (data) {
if(!data.status){
//被占用
if(type == "email"){
showError("邮箱已被占用! ");
}else if(type == "phone"){
showError("手机号码已被占用! ");
}
return false;
}else {
//没被占用
clearError();
return true;
}
}
});
}
//报错方法
function showError(text){
clearError();
var error = $("<div class='error-text'></div>");
error.text(text);
parent.append(error);
grandfather.addClass("has-error");
}
//清除报错方法
function clearError(){
parent.find(".error-text").remove();
grandfather.removeClass("has-error");
}
}通过这个插件，基本对正则有了大致了解， 正则确实是个很重要很好用的东西！
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
