Strategy mode
Simply put: there are many ways to achieve your goals. You can choose a way to achieve your goals according to your own situation
So there are at least two objects. One is the policy class and the other is the environment class (context). Then you can choose different policies to execute the scheme according to the context
Advantages of the strategy mode:
1. The strategy pattern can effectively avoid multiple conditional choice statements by using techniques and ideas such as composition, delegation and polymorphism
2. The policy pattern provides the perfect support for the open closed principle. The algorithm is encapsulated in an independent policy class, which makes them easy to switch, understand and expand
// html
<!DOCTYPE html>
<head>
<meta charset="utf8">
<title>Form validation in policy mode</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="rule.js"></script>
<script src="validator.js"></script>
</head>
<body>
<form action="#" method="GET" id="form">
<div class="field">
<label>User name</label>
<input type="text" name="name">
</div>
<div class="field">
<label>Contact number</label>
<input type="text" name="mobile">
</div>
<div class="field">
<label>mailbox</label>
<input type="text" name="email">
</div>
<button class="submit" type="submit">Submission</button>
</form>
<script>
let dom = document.getElementById("form");
let formValid = new FormValid(dom);
formValid.add({
field: "name",
rule: new RequiredRule(),
errormsg: "Fields must be filled"
})
formValid.add({
field: "name",
rule: new LengthRule(10),
errormsg: "Limit length to 10 characters"
})
formValid.add({
field: "mobile",
rule: new MobileRule(),
errormsg: "Wrong mobile number"
})
formValid.add({
field: "email",
rule: new EmailRule(),
errormsg: "Mailbox format error"
})
dom.onsubmit = function (event) {
let result = formValid.isValid();
if (result !== true) {
alert(result);
return false;
}
alert("Submit successfully");
}
</script>
</body>
</html>
// css
#form{
margin: 50px auto;
width: 500px;
}
input {
width: 350px;
height: 24px;
padding: 0 4px;
float: left;
}
.field{
margin-top: 10px;
overflow: hidden;
}
label {
float: left;
text-align: right;
width: 100px;
overflow: hidden;
padding-right: 5px;
}
.submit{
margin-top: 20px;
margin-left:104px;
}
/ / policy class
/**
* Must fill
*/
class RequiredRule {
/**
* Verification
* @param {string} value value
* @param {string} errormsg error message
* @param {any} attach Additional parameters
* @returns {string|bool}
*/
test(value, errormsg, attach) {
return /^(:?\s*)$/.test(value) ? errormsg : true;
}
}
/**
* Range
*/
class RangeRule {
/**
* Constructor
* @param {array} range
*/
constructor(range) {
this.range = range;
}
/**
* Verification
* @param {string} value value
* @param {string} errormsg error message
* @returns {string|bool}
*/
test(value, errormsg) {
value = Number.parseFloat(value);
if (this.range[0] <= value && this.range[1] > value) {
return true;
}
return errormsg;
}
}
/**
* Validation of valid values
*/
class NumberRule {
/**
* Verification
* @param {string} value value
* @param {string} errormsg error message
* @returns {string|bool}
*/
test(value, errormsg) {
return /^(?:\d+)$/.test(value) || errormsg;
}
}
/**
* Mailbox validation
* Format: login name @ host name. Domain name
*/
class EmailRule {
constructor() {
this.rule = new RegExp(/(?:\w+)@(?:\w+)\.(?:\w+)/);
}
/**
* Verification
* @param {string} value value
* @param {string} errormsg error message
* @returns {string|bool}
*/
test(value, errormsg) {
return this.rule.test(value) || errormsg;
}
}
/**
* Phone number verification
*/
class MobileRule {
constructor() {
this.rule = new RegExp(/^1\d{10}$/);
}
/**
* Verification
* @param {string} value value
* @param {string} errormsg error message
* @returns {string|bool}
*/
test(value, errormsg) {
return this.rule.test(value) || errormsg;
}
}
class LengthRule {
constructor(maxlength) {
this.maxlength = maxlength;
}
/**
* Verification
* @param {string} value value
* @param {string} errormsg error message
* @returns {string|bool}
*/
test(value, errormsg) {
return value.length > this.maxlength ? errormsg : true;
}
}
/ / environment class
class FormValid {
/**
* Constructor
* @param {HTMLFormElement} form Element node
*/
constructor(form) {
this.form = form;
this.rules = [];
}
/**
* Add validation rule
* @param {object} option
* @param {string} option.field Field name
* @param {object} option.rule rule
* @param {string} option.errormsg error message
*/
add({ field, rule, errormsg }) {
if (typeof rule.test == "function" && this.form[field]) {
this.rules.push(() => {
return rule.test(this.form[field].value, errormsg);
});
}
}
isValid() {
let result = [];
for (let i = 0; i < this.rules.length; i++) {
let r = this.rules[i]();
if (r !== true) result.push(r);
}
return result.length > 0 ? result : true;
}
}
Source code: https://pan.baidu.com/s/17 ﹣ obg1dqmbxadg ﹣ aw3swgg
Sample: http://js.zhuamimi.cn/%E8%A1%A8%E5%8D%95%E9%AA%8C%E8%AF%81/