javascriptポリシーモードを利用して書いた入力内容検証プラグイン
4753 ワード
一つのWebプロジェクトでは、登録、ログイン、ユーザー情報の修正などの機能の実現は、フォームの提出に欠かせない.ユーザーが入力したデータをバックグラウンドに渡す前に、登録する時にユーザー名を記入したかどうか、パスワードの長さが規定に合っているかどうかを確認する必要があります.このように、不正なデータの提出による不必要なネットワークオーバーヘッドを回避することができる.以下はケースです
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"/>
<script src="./validator.js"/>
<form id="registerForm" method="post">
：
<input type="text" name="userName"/> <br/>
：
<input type="text" name="password"/> <br/>
：
<input type="text" name="phoneNumber"/><br/>
：
<input type="text" name="email"/><br/>
<input class="button_btn" type="button" value="button" name=""/>
</form>
<script>
var validataFunc = function () {
var validator = new Validator();
validator.add(registerForm.userName,[{ strategy: 'isNonEmpty', errorMsg: 'username ' }]);
validator.add(registerForm.password, [{ strategy: 'isNonEmpty', errorMsg: 'password ' }, {strategy:"validatePwd",errorMsg:"password "},{ strategy: 'minLength:6', errorMsg: ' 6 ' }]);
validator.add(registerForm.phoneNumber, [{ strategy: 'isNonEmpty', errorMsg: 'phoneNumber ' }, { strategy: "isMobile", errorMsg: "phoneNumber " }]);
validator.add(registerForm.email, [{ strategy: 'isNonEmpty', errorMsg: 'email ' }, {strategy:"validateEmail",errorMsg:"email "}]);
var msg = validator.start();
if (msg) {
return msg;
}
}
var registerForm = document.getElementById('registerForm');
var button_btn=document.getElementsByClassName('button_btn');
button_btn[0].onclick = function () {
var msg = validataFunc();
if (msg) {
alert(msg);
return false;
}
}
</script>
</code></pre>
<pre><code>//validator.js
//
var strategies = {
isNonEmpty: function (value, errorMsg) {
if (value == "") {
return errorMsg;
}
},
minLength: function (value, length, errorMsg) {
if (value.length < length) {
return errorMsg;
}
},
isMobile: function (value, errorMsg) {
if (!/^1[3|5|6|8][0-9]{9}$/.test(value)) {
return errorMsg;
}
},
dataType: function (type, obj) {
return Object.prototype.toString.call(obj) === '[object ' + type + ']';
},
//
validateUsername: function (value, errorMsg) {
var regex = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
var regex2 = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
var regex3 = /^\w+$/;
if (!(regex.test(value) || regex2.test(value) || regex3.test(value))) {
return errorMsg;
}
},
//
validatePhone: function (value, errorMsg) {
var regex = /^(1[2|3|4|5|6|7|8])\d{9}$/;
if (!regex.test(value)) {
return errorMsg;
}
},
//
validateEmail: function (value, errorMsg) {
var regex = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
if (!regex.test(value)) {
return errorMsg;
}
},
//
validatePwd: function (value, errorMsg) {
var regex = /^(?![0-9_]+$)(?![a-zA-Z_]+$)[0-9a-zA-Z_]{6,20}$/;
if (!regex.test(value)) {
return errorMsg;
}
}
}
//
function Validator() {
this.cache = [];
}
Validator.prototype.add = function (ele, rules) {
if (!strategies.dataType("Array", rules)) {
throw new Error("add , add ");
return false;
} else {
var self = this;
for (var i = 0, rule; rule = rules[i++];) {
(function (rule) {
var ary = rule.strategy.split(":");
self.cache.push(function () {
var strategy = ary.shift();
ary.unshift(ele.value);
ary.push(rule.errorMsg);
return strategies[strategy].apply(self, ary);
});
})(rule);
}
}
}
Validator.prototype.start = function () {
for (var i = 0, item; item = this.cache[i++];) {
var errorMsg = item();
if (errorMsg) {
return errorMsg;
}
}
}
</code></pre>
</article>
</div>
</div>