我们先这样举例 值得注意的是我们需要去知道他的$v.name里面的内容
也就是 $invalid $dirty $error $pending $each 这个value
特别的注意 $error里的解释：It is a shorthand to $invalid && $dirty
也就是一个与的组合 你可以去试着改变这两者的值 再去看$error的值
当然还有两个重要的方法: $touch $reset 上面也有实例 说简单点就是设置这个以及子节点的$dirty 为true或者false
而设置这个$dirty 再结合 $invalid就可以判断验证成功与否
$error 是由$dirty和$invalid共同决定的
在这里的验证规则流程是这样的 如果$error为true那么form-group会添加一个form-group--error这个class
只有在$error为true时 如果你不符合任意一个验证规则 例如不符合required 那么就会提示验证失败
如果验证错误就给出错误提示 这是我的错误样式:
.form-group--error input,.form-group--error input:focus,.form-group--error input:hover,.form-group--error textarea {
border-color: #CC3333;
}
2.密码验证
密码验证其实和上面的差不多 只不过他的验证规则时通过 sameAs 来进行验证的
3.组合验证
除了上面这些还有一个组合验证 也就是如果任意一个不符合验证规则就不通过 这个还是挺常用的
我们可以在验证字段这样去组合:
如果任意一个就是FlatA flatB forGroup其中一个不符合验证规则 那么$v.validationGroup.$error就是false
4.异步验证
特别是在验证唯一性的时候 我们肯定会遇到这样的一个场景:
就比如我们的邮箱 如果已经注册过这个邮箱了 那么再用这个邮箱去注册显然不是我们想要的
还有就是我们登录时我们需要去核对我们的用户的密码
这边我给出的实例就是对于用户名的注册 如果已经注册了就会提示已经注册过
完全支持async/await语法。它与Fetch API结合使用也很出色 那么我们可以通过后端API提供的结果可以进行判断
我们可以去增加我们唯一性的验证:
这里我现在本地测试 通过Laravel作为后端来提供的数据校验 实际项目中的话可以再结合数据库
'unique','middleware'=>['api','cors']],function () {
Route::get('/name/{value}',function(Request $request,$value){
if($value==="gavin"){
return response()->json(false);
}
return response()->json(true);
});
});
如果我们去注册 gavin这个用户就会提示该昵称已经被注册 因为在用户名我增加了isUnique验证
代码如下:
显示结果应该是这样的:
5.自定义验证
同样的我们不仅可以使用它提供给我们的验证规则 我们也可以自定义验证规则并与之前的进行组合
官方给出了一个简单实例:
{
if (Array.isArray(value)) return !!value.length
return value === undefined || value === null
? false
: !!String(value).length
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。
（编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
