代码拉取完成,页面将自动刷新
自定义vue指令,前端表单校验
import hvalidate from './js/hvalidate.js'
Vue.use(hvalidate)
3.校验以下的字段
let msgConfig = {
phone: "手机号不正确",
email: "邮箱不正确",
idCard: "身份证不正确",
passWord: "密码由6-12位字母和数字组成",
max: "长度超过限制",
min: "字段位数不对",
required: "不能为空"
}
rule使用msgConfig中的字段
默认的错误信息提示是msgConfig中定义的
v-hvali="{key:'email',rule:'required|email'}"
v-hvali="{key:'phone',rule:'required|phone',msg:'手机号不能为空'}" //当设置了msg之后 提示信息以用户设置的msg为准
<form action="">
<label for="">phone:</label> <input type="text" placeholder="phone" v-hvali="{key:'phone',rule:'required|phone',msg:'手机号不能为空'}"> <br>
<hr />
<label for="">email:</label> <input type="text" placeholder="email" v-hvali="{key:'email',rule:'required|email'}"> <br>
<hr />
<button class="btn" type="button" @click="submit">提交</button>
</form>
methods: {
submit() {
console.log("submit");
var valiResult=beforeSubmitValidate(this);//valiResult 值为false或true
}
}
4.demo 请参考index.vue
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。
1. 开源生态
2. 协作、人、软件
3. 评估模型