jq-validate實現表單即時驗證功能,可做插件擴展於layui
最近在做公司後臺的前端頁面用的是layui有需求是要寫公共文件來實現表單的即時驗證我經過多方查找用了jq的validate來實現的話不多說上代碼
- 前端頁面
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="utls.css"></link>
</head>
<body>
<form>
<div class="form_control">
<input class="required" value="[email protected]" type="text" name="email" data-tip="請輸入您的郵箱" data-valid="isNonEmpty||isEmail" data-error="email不能爲空||郵箱格式不正確">
</div>
<div class="form_control">
<input class="required" value="123456789" type="password" data-tip="請輸入您的密碼" data-valid="isNonEmpty||between:6-16" data-error="密碼不能爲空||密碼長度6-16位" name="nickname">
</div>
<div class="form_control">
<input class="required" value="王大錘" type="text" name="email" data-tip="請輸入您的姓名" data-valid="isNonEmpty||onlyZh||between:2-5" data-error="姓名不能爲空||姓名只能爲中文||姓名長度爲2-5位">
</div>
<div class="form_control">
<span class="required" data-valid="isChecked" data-error="性別必選" data-type="radio">
<label><input type="radio" name="sex">男</label>
<label><input type="radio" name="sex">女</label>
<label><input type="radio" name="sex">未知</label>
</span>
</div>
<div class="form_control">
<span class="required" data-valid="isChecked" data-error="標籤至少選擇一項" data-type="checkbox">
<label><input type="checkbox" name="label">紅</label>
<label><input type="checkbox" name="label">綠</label>
<label><input type="checkbox" name="label">藍</label>
</span>
</div>
<div class="form_control">
<select class="required" data-valid="isNonEmpty" data-error="省份必填">
<option value="">請選擇省份</option>
<option value="001">001</option>
<option value="002">002</option>
<option value="003">003</option>
<option value="004">004</option>
<option value="005">005</option>
<option value="006">006</option>
<option value="007">007</option>
<option value="008">008</option>
<option value="009">009</option>
<option value="010">010</option>
</select>
</div>
<div>
<input type="submit" value="提交">
</div>
</form>
<!--引入jq-->
<script type="text/javascript" src="jquery-1.11.1.js"></script>
<!--引入jq-validate.js 如果有需要還要引入官方的jq-validate.min.js-->
<script type="text/javascript" src="jquery-validate.js"></script>
<script type="text/javascript">
// 獲取表單元素
$('form').validate({
onFocus: function() {
this.parent().addClass('active');
return false;
},
onBlur: function() {
var $parent = this.parent();
var _status = parseInt(this.attr('data-status'));
$parent.removeClass('active');
if (!_status) {
$parent.addClass('error');
}
return false;
}
});
$('form').on('submit', function(event) {
event.preventDefault();
$(this).validate('submitValidate'); //return boolean;
});
</script>
</body>
</html>
*jq-validate文件
/*
<input
type="text"
name="username"
lay-verify="title"
autocomplete="off"
placeholder="請輸入標題"
class="layui-input" // 類名要寫layui-input
data-tip="請輸入您的姓名"
data-valid="isNonEmpty||onlyZh||between:2-5" // 驗證策略
data-error="姓名不能爲空||姓名只能爲中文||姓名長度爲2-5位" //驗證提示信息
>
引入3個JS文件
<script type="text/javascript" src="../js/jquery.validate.min.js"></script>
<script type="text/javascript" src="../js/jquery-validate.js"></script>
<script type="text/javascript" src="../js/validate.js"></script>
*/
(function(factory) {
if (typeof define === 'function' && define.amd) {
// AMD
define(['jquery'], factory);
} else if (typeof exports === 'object') {
// CommonJS
factory(require('jquery'));
} else {
// Browser globals
factory(jQuery, window, document);
}
}(function($, window, document, undefined) {
/*************************策略對象*****************************/
var RULES = {
isNonEmpty: function(value, errorMsg) {
//不能爲空
if (!value.length) {
return errorMsg;
}
},
minLength: function(value, length, errorMsg) {
//大於
if (value.length < length) {
return errorMsg;
}
},
maxLength: function(value, length, errorMsg) {
//小於
if (value.length < length) {
return errorMsg;
}
},
isMobile: function(value, errorMsg) {
//是否爲手機號碼
if (!/(^1[3|5|8][0-9]{9}$)/.test(value)) {
return errorMsg;
}
},
isEmail: function(value, errorMsg) {
//是否爲郵箱
if (!/(^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$)/.test(value)) {
return errorMsg;
}
},
between: function(value, range, errorMsg) {
//大於小於
var min = parseInt(range.split('-')[0]);
var max = parseInt(range.split('-')[1]);
if (value.length < min || value.length > max) {
return errorMsg;
}
},
onlyEn: function(value, errorMsg) {
//純英文
if (!/^[A-Za-z]+$/.test(value)) {
}
},
onlyZh: function(value, errorMsg) {
//純中文
if (!/^[\u4e00-\u9fa5]+$/.test(value)) {
return errorMsg;
}
},
onlyNum: function(value, errorMsg) {
//數字包含小數
if (!/^[0-9]+([.][0-9]+){0,1}$/.test(value)) {
return errorMsg;
}
},
onlyInt: function(value, errorMsg) {
//整數
if (!/^[0-9]*$/.test(value)) {
return errorMsg;
}
},
isChecked: function(value, errorMsg, el) {
var i = 0;
var $collection = $(el).find('input:checked');
if(!$collection.length){
return errorMsg;
}
}
};
/*************************Validator類*****************************/
var setting = {
type: null,
onBlur: null,
onFocus: null,
onChange: null,
successTip: true
};
var Validator = function() {
this.cache = [];
};
Validator.prototype.add = function(dom, rules) {
var self = this;
for (var i = 0, rule; rule = rules[i++];) {
(function(rule) {
var strategyAry = rule.strategy.split(':');
var errorMsg = rule.errorMsg
self.cache.push(function() {
var strategy = strategyAry.shift(); // 前刪匹配方式並賦值
strategyAry.unshift(dom.value); // 前插value值
strategyAry.push(errorMsg); // 後插出錯提示
strategyAry.push(dom); // 後插dom
if (!RULES[strategy]) {
$.error('沒有' + strategy + '規則，請檢查命名或自行定義');
}
return {
errorMsg: RULES[strategy].apply(dom, strategyAry),
el: dom
};
});
}(rule));
}
};
Validator.prototype.start = function() {
var result;
for (var i = 0, validatorFunc; validatorFunc = this.cache[i++];) {
var result = validatorFunc();
if (setting.successTip) {
new Validator().showMsg($(result.el), '', 1);
}
if (result.errorMsg) {
return result;
}
};
return true;
};
Validator.prototype.showMsg = function(target, msg, status, callback) {
//status
// 0 : tip
// 1 : success
// 2 : error
var _current = status ? (status > 1 ? 'error' : 'success') : 'tip';
var $context = target.parent();
var $msg = $context.find('.valid_message');
var _other = target.attr('data-type') || '';
$msg.remove();
$context.removeClass('success tip error').addClass(_current+' '+_other).append('<div><span class="valid_message" style="color:red;">' + msg + '</span></div>');
};
var plugin = {
init: function(options) {
var $form = this;
var $body = $('body');
var $required = $form.find('.layui-input');
setting = $.extend(setting, options);
if (setting.type) {
$.extend(RULES, setting.type);
}
var validator = new Validator();
$body.on({
focus: function(event) {
var $this = $(this);
var _tipMsg = $this.attr('data-tip') || '';
var _status = $this.attr('data-status');
if (_status === undefined ||!parseInt(_status)) {
validator.showMsg($this, _tipMsg);
}
setting.onFocus ? setting.onFocus.call($this, arguments) : '';
},
blur: function(event) {
var $this = $(this);
var dataValid = $this.attr('data-valid');
if (!dataValid ) {
return;
} else {
var validLen = dataValid.split('||');
}
var errCollection = $this.attr('data-error');
var errMsgAry = errCollection.split("||");
var strategyAry, strategy, errMsg;
for (var i = 0; i < validLen.length; i++) {
strategyAry = validLen[i].split(':');
strategy = strategyAry.shift();
strategyAry.unshift(this.value);
strategyAry.push(errMsgAry[i]);
strategyAry.push(this);
errMsg = RULES[strategy].apply(this, strategyAry);
if (errMsg) {
$this.attr('data-status', 0);
validator.showMsg($this, errMsg, 2);
break;
}
};
if (!errMsg) {
$this.attr('data-status', 1);
//
console.log("成功")
$this.css("border-color", "cadetblue")
setting.successTip ? validator.showMsg($this, '', 1) : $this.parent().find('.valid_message').remove();
}else{
console.log("失敗")
$this.css("border-color", "red")
}
setting.onBlur ? setting.onBlur.call($this, arguments) : '';
},
change: function(event) {
setting.onChange ? setting.onChange.call($this, arguments) : '';
}
}, '.layui-input');
},
submitValidate: function(options) {
var $form = options || this;
var $body = $('body');
var $required = $form.find('.layui-input');
var validator = new Validator();
var $target;
$.each($required, function(index, el) {
var $el = $(el);
var dataValid = $el.attr('data-valid');
var validLen = dataValid.split('||');
var errCollection = $el.attr('data-error');
var errMsgAry = errCollection.split("||");
var ruleAry = [];
for (var i = 0; i < validLen.length; i++) {
ruleAry.push({
strategy: validLen[i],
errorMsg: errMsgAry[i]
});
};
validator.add(el, ruleAry);
});
var result = validator.start();
if (result.errorMsg) {
$target = $(result.el);
//$target.attr('data-status', 0)[0].focus();
validator.showMsg($target, result.errorMsg, 2);
return false;
}
return true;
}
};
$.fn.validate = function() {
var method = arguments[0];
if (plugin[method]) {
method = plugin[method];
arguments = Array.prototype.slice.call(arguments, 1);
} else if (typeof(method) == 'object' || !method) {
method = plugin.init;
} else {
$.error('Method ' + method + ' does not exist on jQuery.validate Plugin');
return this;
}
return method.apply(this, arguments);
}
}))
用法已經寫在上面了,有更好的方法可以留言聯繫我