vue三目运算只能输入数字并且验证手机号和座机号
时间: 2023-10-19 11:15:54 浏览: 110
vue.js实现只能输入数字的输入框
5星 · 资源好评率100%
Vue的三目运算符可以用在表单验证中,但是它本身并不会执行验证操作。你需要使用正则表达式来验证手机号和座机号。
下面是一个简单的例子,演示了如何使用Vue的三目运算符和正则表达式来验证手机号和座机号:
```html
<template>
<div>
<label>
手机号码:
<input v-model="phone" />
<span v-if="!phone || !phoneReg.test(phone)">请输入正确的手机号码</span>
</label>
<br />
<label>
座机号码:
<input v-model="tel" />
<span v-if="!tel || !telReg.test(tel)">请输入正确的座机号码</span>
</label>
</div>
</template>
<script>
export default {
data() {
return {
phone: '',
tel: '',
phoneReg: /^1[3456789]\d{9}$/,
telReg: /^0\d{2,3}-?\d{7,8}$/
}
}
}
</script>
```
在上面的代码中,`phone`和`tel`分别是手机号和座机号的输入框,`phoneReg`和`telReg`是对应的正则表达式。当输入框中的值不符合正则表达式的规则时,就会显示相应的提示信息。
需要注意的是,这里的正则表达式只是一个简单的示例,实际的验证规则可能会更加复杂,需要根据具体的需求进行调整。
阅读全文