问题描述：
在vue+elemnetUI的前端项目中，使用input输入框进行内容的输入的时候，有的时候会要求限制输入字符长度，有的会限制输入的内容。以下是几个简单的介绍。
示例1：限制联系人输入长度为10个字符
<template><el-form ref="registerForm" :model="registerForm" :rules="registerRules" label-width="80px"><el-form-item label="联系人" prop="contact"><el-inputv-model="limitedContact"placeholder="请输入联系人":maxlength="10"style="width: 200px"></el-input></el-form-item></el-form></template><script>export default {data() {return {registerForm: {contact: ''},registerRules: {contact: [{ required: true, message: '请输入联系人', trigger: 'blur' }]}};},computed: {limitedContact: {get() {return this.registerForm.contact.slice(0, 10);},set(value) {this.registerForm.contact = value;}}}};</script>
示例2：输入手机号的时候，只允许输入数字
<template><el-form ref="registerForm" :model="registerForm" :rules="registerRules" label-width="80px"><el-form-item label="手机号" prop="phoneNumber"><el-inputv-model="limitedPhoneNumber"placeholder="请输入联系人手机号"@input="validatePhoneNumber"></el-input></el-form-item></el-form></template><script>export default {data() {return {registerForm: {phoneNumber: ''},registerRules: {phoneNumber: [{ required: true, message: '请输入手机号', trigger: 'blur' },{pattern: /^1[0-9]{10}$/,message: '手机号格式不正确',trigger: 'blur',},]}};},computed: {limitedPhoneNumber: {get() {return this.registerForm.phoneNumber;},set(value) {const limitedValue = value.replace(/\D/g, '');this.registerForm.phoneNumber = limitedValue.substr(0, 11);}}},methods: {validatePhoneNumber() {const phoneNumber = this.registerForm.phoneNumber;if (phoneNumber && !/^1[0-9]{0,10}$/.test(phoneNumber)) {this.registerForm.phoneNumber = phoneNumber.replace(/\D/g, '');}}}};</script>
示例3：要限制密码输入必须为字母和数字的组合，且在6-18个字符范围之间
<template><el-form ref="registerForm" :model="registerForm" :rules="registerRules" label-width="80px"><el-form-item label="密码" prop="password"><el-inputv-model="registerForm.password"type="password"placeholder="请输入密码"@blur="validatePassword"></el-input></el-form-item><el-form-item label="确认密码" prop="confirmPassword"><el-inputv-model="registerForm.confirmPassword"type="password"placeholder="请再次输入密码"></el-input></el-form-item></el-form></template><script>export default {data() {return {registerForm: {password: '',confirmPassword: ''},registerRules: {password: [{ required: true, message: '请输入密码', trigger: 'blur' },{min: 6,max: 18,message: '密码长度在 6 到 18 个字符之间',trigger: 'blur',},{pattern: /^(?=.*[a-zA-Z])(?=.*\d)[a-zA-Z\d]+$/,message: '密码必须包含字母和数字',trigger: 'blur',},],confirmPassword: [{ required: true, message: '请再次输入密码', trigger: 'blur' },{validator: this.validateConfirmPassword,trigger: 'blur',},]}};},methods: {validatePassword() {this.$refs.registerForm.validateField('confirmPassword');},validateConfirmPassword(rule, value, callback) {if (value !== this.registerForm.password) {callback(new Error('两次输入的密码不一致'));} else {callback();}}}};</script>
示例4：若对示例3进行修改，修改成必须包含字母和数字，但不仅限于字母和数字。只需要更改registerRules中的代码即可。
password: [{ required: true, message: "请输入密码", trigger: "blur" },{min: 6,max: 18,message: "密码长度在 6 到 18 个字符之间",trigger: "blur",},{validator: (rule, value, callback) => {// 使用正则表达式进行验证，要求同时包含字母和数字const regex = /^(?=.*[a-zA-Z])(?=.*\d).+$/;if (regex.test(value)) {callback();} else {callback(new Error('密码必须包含字母和数字'));}},trigger: 'blur',},]
