Ant Design Vue Adds a length verification function that distinguishes Chinese and English

The original maxLength attribute does not distinguish between full-width/half-width characters, and is not suitable for some places where Chinese and English can be mixed. So I want to find a verification that can distinguish between full-width/half-width characters, and ensure a certain degree of reusability.

After searching on Baidu, I couldn't find a suitable ready-made solution, so I tried to use it myself.v-decoratorThe custom verification validator is implemented, and the core code is as follows:

Verification plug-in

const validators = {
 /**
  * The length verification of the full-width characters/half-width characters can be distinguished.
  * @param min
  * @param max
  * @returns {Function}
  */
 length({min=0,max=100000000}){
 return function(rule, value,callback){
  //Replace a full-width character with two half-width characters to get the true length.  let realLength = (/[\u0391-\uFFE5]/g,'aa').length;
  realLength <= max && realLength >= min ? callback() : max<100000000 ? callback('The input length should be'+min+'arrive'+max+'Between characters!  ') : callback('At least it should be entered'+min+'characters!  ');
 }
 }
}
const install = function(Vue, options) {
  = validators;
}
export default { install }

Install plug-ins

(validators)

Add verification

<a-form-item label="Parameter value" :labelCol="labelCol" :wrapperCol="wrapperCol">
   <a-input v-decorator="[ 'paraValue', ]" placeholder="Please enter parameter value"></a-input>
</a-form-item>

validatorRules:{
  paraValue:{rules: [{validator:({max:50})}]}
  }

If you can't understand the writing of verification functions, you can first understand the concepts of closures and higher-order functions. I won't talk about it here.

Summarize

The above is the length verification function that the editor introduced to you. I add to the Ant Design Vue that distinguishes Chinese and English. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support for my website! If you think this article is helpful to you, please reprint it. Please indicate the source, thank you!