Vue Form Verification plug-in creation process, vue form creation process

Vue Form Verification plug-in creation process, vue form creation process

Preface

Some time ago, the boss set up the Vue development environment, so we happily came to the Vue from JQ. During this process, I was not happy with form verification. When I saw the vue plug-in section, I felt I could write one, so I started to write a Form Verification plug-in va myself. js. Of course, why not find a plug-in? Vue-validator.

1. I thought about it. Form Verification is highly customized. This plug-in found on the internet adds a lot of functionality to meet the needs of various companies. We don't need this. It turns out that vue-validator has 50 kb, while va. js I wrote is only 8 KB.
2. the other is that the vue-validator api is really long. If it doesn't move, v-validate: username = "['required, the call I designed is like -- v-va: Money

Of course, this article only shows how to write a vue Form Verification plug-in that meets your company's needs. The following describes the concept.

I. Composition of the form verification module

Any form verification module is composedConfiguration -- validation -- error -- ValueThese parts constitute.

• Configuration: configuration rules and configuration errors, as well as priority
• Verification: There is a change event verification, verification when you click the submit button, and of course there is a value in the input event
• Error: Generally, the error message is classified as template or custom.
• Value: return the verified data to the developer for calling.
  

The following are the requirements of my boss for my company projects.

• Centralized management of verification rules and error reporting templates.
• The error reporting time is optional.
• The data after the verification is correct has been packaged into an object and can be directly used
• Allow each page to overwrite the rule, customize the error message, and allow ajax to obtain data before supplementing the rule.
• Verify in order. An error is displayed in the first error dialog box.
  

I was curious to ask, why? Then, the boss will give me one answer:

• The benefits of centralized management rules and Error Reporting templates are that they can be globally used and changed. The boss told me that the nickname is changed three times. If these regular expressions are written on various pages, o (￣ ヘ ￣ o #), you need to change N pages.
• The process of pc and mobile is different. Many checks on pc verify and report errors when the change event or input event occurs. However, mobile usually needs to go to the submit button for verification. Therefore, when writing plug-ins, you must be prepared with both hands. Then, the error ui should support the layer plug-in we are currently using. Of course, the ui for this error may also change in the future, so you know.
• Of course, in the original jq era, our public form verification can be completed, and all the data is collected into an object. In this way, you do not need to take the value again. You need this plug-in.
• In the original jq public scripts, regular expressions and errors are concentrated in one place, which is very convenient in many places. However, it is not flexible enough to modify some pages. The RealName rule is first configured for a page and uses the field name on the backend interface. On another payment page, the field name on the backend interface is changed to PayUser, but the regular expression is still RealName. We would like to repeat RealName. This is not convenient or nice. In addition, the payment amount is limited by the maximum and minimum values, which must be obtained from the backend. You should also consider this situation. You can modify rules and customize errors on different pages.
• Why do we need to verify in order? You forgot to input the box for the last time, and an error is reported from top to bottom in order. Otherwise, the user does not know where the error is. There are also rules in order. Oh, oh. It seems that this time I put something, I need to use an array. Keep order as possible.
  

After hearing this, I got a rough idea. There are so many uncomfortable points in jq form verification that I previously wrote. -_-| Next, let's take a look at what vue gave me. Let me write

Ii. How to Write Vue plug-ins

How can I start to write the vue plug-in? That's because the Vue document was written here when I wanted a solution.

When I finish writing va. js, I feel very clear about these things.

In fact, I want to write a command to complete form verification. The results showed that there may be 2-3 commands, and some methods should be defined on Vue. prototype, so that the rules can be extended within each sub-instance. So the boss said, this is equivalent to the plug-in. This makes me very whale.

Va. js mainly uses Vue commands

The Vue documentation is really well written, but I 'd like to add more.

Vnode. context is the Vue instance.

When we are working on a project, we often have N child components hanging on a root component, and N child components may be hanging on it. The instance obtained by vnode. context is the instance of the component bound to this command. This is quite useful. You can do many things

Of course, Vue. prototype is also used.
Vue. prototype. $ method is a method that can be called on each component. You can use this. $ method to call

# Iii. Implementation ##

Core Ideas include:

Rule Constructor

// Va constructor VaConfig (type, typeVal, errMsg, name, tag) {this. type = type, this. typeVal = typeVal, this. errMsg = errMsg, this. name = name, this. tag = tag}

• Type: nonvoid (non-empty), reg (regular), limit (range), equal (equal to an input), unique (not the same)
• TypeVal: set different values based on different types.
• ErrMsg: custom error message
• Name: used to pass ajax fields, such as Password and Username
• Tag: the name used to report an error, for example, 'Bank account' or 'name'
  

Three rules are set.

1. Default rule: As long as commands are bound, verification is performed by default. For example, non-empty verification. You can add modifiers to remove them.
2. Option rules: Rules added using Vue command modifiers.
3. Custom Rules: Rules added to the value of the Vue command.
Only one rule of the same type exists, that is, if the type is reg (regular), it will overwrite each other.
Overwrite priority: Custom Rules> Option rules> default rules

There are many ideas. I don't know what to do. Next we will look at the source code directly.

Source code

/** Process: bind the command-> set the configuration (vaConfig)-> check-> showErr or custom error */var va = {}; function unique (arr) {var hashTable ={}, newArr = []; for (var I = 0; I <arr. length; I ++) {if (! HashTable [arr [I]) {hashTable [arr [I] = true; newArr. push (arr [I]) ;}} return newArr ;}function addClass (dom, _ class) {var hasClass = !! Dom. className. match (new RegExp ('(\ s | ^)' + _ class + '(\ s | $)') if (! HasClass) {dom. className + = ''+ _ class }}// check the function check (v, conditions) {var res = 0; // 0 indicates OK, if the array is used, it indicates a field error. // The verification function var cfg ={// non-empty nonvoid: (v, bool) =>{ if (bool) {return v. trim ()? 0: ['nonvoid'];} else {return 0 ;}, reg :( v, reg) => reg. test (v )? 0: ['reg '], // regular limit :( v, interval) => (+ v> = interval [0] & + v <= interval [1])? 0: ['limit', interval], equal: (v, target) =>{ // What is equal to var _ list = document. getElementsByName (target), _ target for (var I = 0; I <_ list. length; I ++) {if (_ list [I]. className. indexOf ('va ')>-1) {_ target = _ list [I] ;}} return (_ target. value = v )? 0: ['equal', _ target. getAttribute ('tag')]}, unique :( v) => {var _ list = document. getElementsByClassName ('unique'), valList = []. map. call (_ list, item => item. value) return (unique (valList ). length = valList. length )? 0: ['unique'] }}for (var I = 0; I <conditions. length; I ++) {var condi = conditions [I], type = condi. type, typeVal = condi. typeVal res = cfg [type] (v, typeVal) // console. log (res, v, type, typeVal) // if there is a custom error message, return the custom error message console. log (res) if (res) {res = condi. errMsg | res break} return res;} function showErr (name, checkResult) {var type = checkResult [0], ext = checkResult [1] | [] var ERR_MSG = {Nonvoid: '$ {name} cannot be blank', reg: '$ {name} format error', limit: '$ {name} must be between $ {ext [0]} and $ {ext [1]}', equal: 'two times $ {ext} are different', unique: '$ {name} repeat'} // use layer to report errors. If you need to customize the error reporting method, set the full-text layer to a layer. Layer. msgWarn (ERR_MSG [type])}/*** [VaConfig va constructor] * @ param {[string]} type [verification type, such as reg, limit, etc.] * @ param {[*]} typeVal [value configured according to the verification type] * @ param {[string]} errMsg [error message] * @ param {[string]} name [field name used for ajax] * @ param {[string]} tag [Chinese name, used to report errors] */function VaConfig (type, typeVal, errMsg, name, tag) {this. type = type, this. typeVal = typeVal, this. errMsg = errMsg, this. name = name, this. tag = tag} // used To remove duplicate rules and overwrite the rules. Replace the previous Array by default. prototype. uConcat = function (arr) {var comb = this. concat (arr), unique ={}, result = [] for (var I = 0; I <comb. length; I ++) {// console. log (I, comb [I]) var type = comb [I]. type if (unique [type]) {var index = unique [type]. index unique [type] = comb [I] unique [type]. index = index;} else {unique [type] = comb [I] unique [type]. index = I ;}for (var I = 0; I <100; I ++) {for (var item in unique ){ If (unique [item]. index = I) {delete unique [item]. index result. push (unique [item]) }}return result} // regular table var regList = {ImgCode:/^ [0-9a-zA-Z] {4} $/, SmsCode: /^ \ d {4} $/, MailCode:/^ \ d {4} $/, UserName:/^ [\ w | \ d] {4, 16} $ /, password:/^ [\ w! @ # $ % ^ & *.] {6, 16} $/, Mobile:/^ 1 [3 | 5 | 8] \ d {9} $/, RealName: /^ [\ u4e00-\ u9fa5] {2, 10} $/, BankNum:/^ \ d {10, 19} $/, Money: /^ ([1-9] \ d * | 0) $/, Answer:/^ \ S + $/, Mail:/^ ([a-zA-Z0-9 _\. \-]) + \ @ ([a-zA-Z0-9 \-]) + \.) + ([a-zA-Z0-9] {2, 4}) + $/} va. install = function (Vue, options) {Vue. directive ('va ', {bind: function (el, binding, vnode) {var vm = vnode. context, name = binding. arg = 'extend '? El. getAttribute ('name'): binding. arg, tag = el. getAttribute ('tag'), baseCfg = [] // default verification rule-no need to write, default rules (such as non-empty ), optionalConfig = [] // configuration set selected by the user -- related to name, customConfig = [] // user-defined rules (in components) -- bingding. value, option = binding. modifiers, regMsg = el. getAttribute ('regmsg ') | ''var eazyNew = (type, typeVal) =>{ return new VaConfig (type, typeVal, '', name, tag )} var regNew = (typeVal) => {return new VaC Onfig ('reg ', typeVal, regMsg, name, tag)} // create a regular el. className = 'va '+ vm. _ uid el. name = name vm. vaConfig | (vm. vaConfig = {}) var NON_VOID = eazyNew ('nonvoid', true) // The default value is not empty. if canNull modifier is added, null if (! Option. canNull) {baseCfg. push (NON_VOID)} // if (option. vanow) {el. addEventListener ('change', function () {vm. vaResult | (vm. vaResult = {}) vm. vaVal | (vm. vaVal ={}) var value = el. value, conditions = vm. vaConfig [name], para = el. getAttribute ('va-para') // The parameter passed to the callback // if it is allowed to be null, this parameter is null. if (value = ''& option. canNull) {vm. vaVal [name] = value return} vm. vaResult [name] = check (value, condition S); var _ result = vm. vaResult [name] if (_ result) {// if a string is returned, a custom error is returned. if an array is returned, when showErr is used, the following error occurs: typeof _ result = 'string '? Layer. msgWarn (_ result): showErr (conditions [0]. tag, _ result) el. value = vm. vaVal [name] = ''return} vm. vaVal [name] = value vm. $ vanow (para) // callback written in the internal method of the Instance})} // if (option. unique) {optionalConfig. push (eazyNew ('unique', name)} // if there is var regOptions = Object in the regular table. keys (option); for (var I = 0; I <regOptions. length; I ++) {var regOption = regOptions [I] if (regList [regOptions [I]) {optionalConfig. Push (regNew (regList [regOption])} // if there is a name in the regList, add optionalConfig if (regList [name]) {optionalConfig. push (regNew (regList [name])} // custom rule if (binding. value) {customConfig = binding. value. map (item => {let type = Object. keys (item) [0]; if (type = 'reg ') {return regNew (item [type])} else {if (type = 'unique ') {addClass (el, 'unique')} return eazyNew (type, item [type])} // The rule is set by the default rule + Modifier rules + custom rules written in attributes + added directly to the vm by the user. merge the rules in vaConfig (the same type rules later will overwrite the previous ones) vm. vaConfig [name] | (vm. vaConfig [name] = []) vm. vaConfig [name] = baseCfg. uConcat (optionalConfig ). uConcat (customConfig ). uConcat (vm. vaConfig [name])},}) Vue. directive ('va-Check', {bind: function (el, binding, vnode) {var vm = vnode. context el. addEventListener ('click', function () {var domList = document. getElementsByClassName ('va '+ vm. _ Uid); vm. vaResult | (vm. vaResult = {}) vm. vaVal | (vm. vaVal ={}) for (var I = 0; I <domList. length; I ++) {var dom = domList [I], name = dom. name, value = dom. value, conditions = vm. vaConfig [name] var _ result = check (value, conditions) // if the returned value is not 0, an error is returned if (_ result) {// if the returned value is a string, the custom error is returned. If it is an array, the typeof _ result = 'string' error is returned using showErr '? Layer. msgWarn (_ result): showErr (conditions [0]. tag, _ result) return} vm. vaVal [name] = value} // callback vm that passes verification. $ vaSubmit () // layer. msgWarn ('all validated successfully') console. log (vm. vaVal)}) Vue. directive ('va-test', {bind: function (el, binding, vnode) {var vm = vnode. context el. addEventListener ('click', function () {vm. vaResult | (vm. vaResult = {}) vm. vaVal | (vm. vaVal ={}) var dom = document. getElementsByNam E (binding. arg) [0], name = dom. name, value = dom. value, conditions = vm. vaConfig [name] var _ result = check (value, conditions) // If the returned value is not 0, an error is reported on the console. log (_ result) if (_ result) {// if a string is returned, a custom error is returned. if an array is returned, when showErr is used, the following error occurs: typeof _ result = 'string '? Layer. msgWarn (_ result): showErr (conditions [0]. tag, _ result) return} vm. vaVal [name] = value var callback = Object. keys (binding. modifiers) [0] vm [callback] ()})/*** set custom configuration using api in the monuted cycle of the Instance */Vue. prototype. vaConfig = VaConfig} module. exports = va

Now the project is in use. Of course, form verification is highly customized. Simply share the process and ideas. This is also a phase achievement of my new vue. Haha ~

Use instance

Box 1Added two commands.

1. v-va: Password indicates the configuration corresponding to the password in the configuration table (including non-null and regular expressions, default rules). At the same time, the Password is used as the key of the successfully obtained data object for verification.
2. The tag is the name of the input box in the error display.

Box 2Two commands are added to the confirmation box.
1. v-va: checkPassword. Password = "[{'equal': 'Password'}]"
Generally, the first field after v-va is the key of the data object, and the name corresponding to the regular expression may be different.
If this field matches the configuration in the configuration table, the configuration will be applied naturally.
If they do not match, add the configuration (option rules) in the. method later ). Like the Password here.

There is also a property value "[{'equal': 'Password'}]" (custom rules ).
Here an array is used, which will be verified according to the configuration of this array.
At the same time, this array is ordered, and the order indicates the priority of the rule.
This configuration indicates that this box must have the same value as the Password box above; otherwise, an error is returned.
In addition, the confirmation box does not contain the final result data object.

2. tag is used as the name of the error message

The verification trigger button contains the command v-va-check.
1.Used to trigger Verification
2.After the verification is successful, the data object is stored under the vaVal attribute of the instance.

Based on the above instance

Rule priority:
1. Custom Rules> Option rules> default rules
2The priority in the rule is in the array order.

In addition, we can see that for the convenience of users, I made some agreements in advance in our team, and may use commands such as v-va, v-va-check, tag, etc, takes up two instance attribute names: vaConfig and vaVal. These conventions and settings make it easy for users to use (control the verification time through configuration, generate data objects that pass the verification after successful verification, and customize error messages ). But it also reduces the universality of this plug-in.

This solution is for reference only. I personally think that form verification is a highly customized requirement and should be chosen based on various business situations as much as possible. In my solution, it is not as dirty as vue-validator.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.