input输入框限制输入长度、限制输入内容

问题描述：
        在vue+elemnetUI的前端项目中，使用input输入框进行内容的输入的时候，有的时候会要求限制输入字符长度，有的会限制输入的内容。以下是几个简单的介绍。

示例1：限制联系人输入长度为10个字符

<template>
  <el-form ref="registerForm" :model="registerForm" :rules="registerRules" label-width="80px">
    <el-form-item label="联系人" prop="contact">
      <el-input
        v-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-input
        v-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-input
        v-model="registerForm.password"
        type="password"
        placeholder="请输入密码"
        @blur="validatePassword"
      ></el-input>
    </el-form-item>
    <el-form-item label="确认密码" prop="confirmPassword">
      <el-input
        v-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',
  },
]复制