【Vue3+Ts project】vant4 form表单校验流程
点击button登录时校验form表单内input框内容是否满足条件,满足允许提交,否则失败,总体分为三步
·
一. form表单校验
1.校验输入框
作用: 获取输入框焦点后就效验
<van-field
:rules="mobileRules"
placeholder="请输入手机号"
></van-field>
const mobileRules = [
{ required: true, message: '请输入手机号' },
{pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/, message: '请输入正确手机号'}
]
<van-field
placeholder="请输入密码"
:rules="passwordRules"
></van-field>
const passwordRules = [
{ required: true, message: '请输入密码' },
{pattern: /^\w{8,16}$/, message: '请输入正确密码'}
]
2.提交时效验
描述:行内属性添加 native-type="submit" 当点击button提交按钮会效验输入框是否输入或输入是否正确
<van-button native-type="submit">登 录</van-button>
3.绑定form点击登录后输出
描述: 点击button提交按钮后校验输入框内容是否满足,这里是做满足时的输出
<van-form autocomplete="off" @submit="login"></van-form>
const login = () => {
console.log(`登录成功`)
}
更多推荐
已为社区贡献6条内容
所有评论(0)