.form-group__message{ display: none; font-size: .95rem; color: #CC3333; margin-left: 10em; margin-bottom: 12px; } .form-group--error+.form-group__message { display: block; color: #CC3333; } .form-group--error input, .form-group--error input:focus, .form-group--error input:hover, .form-group--error textarea { border-color: #CC3333; }
2.密码验证
密码验证其实和上面的差不多 只不过他的验证规则时通过 sameAs 来进行验证的
3.组合验证
除了上面这些还有一个组合验证 也就是如果任意一个不符合验证规则就不通过 这个还是挺常用的
我们可以在验证字段这样去组合:
validations: { flatA: { required }, flatB: { required }, forGroup: { nested: { required } }, validationGroup: ['flatA', 'flatB', 'forGroup.nested'] }
如果任意一个就是FlatA flatB forGroup其中一个不符合验证规则 那么$v.validationGroup.$error就是false
4.异步验证
特别是在验证唯一性的时候 我们肯定会遇到这样的一个场景:
就比如我们的邮箱 如果已经注册过这个邮箱了 那么再用这个邮箱去注册显然不是我们想要的
还有就是我们登录时我们需要去核对我们的用户的密码
这边我给出的实例就是对于用户名的注册 如果已经注册了就会提示已经注册过
完全支持async/await语法。它与Fetch API结合使用也很出色 那么我们可以通过后端API提供的结果可以进行判断
我们可以去增加我们唯一性的验证:
name: { required, minLength: minLength(4), async isUnique (value) { if (value === '') return true const response = await fetch(`:8000/api/unique/name/${value}`) return Boolean(await response.json()) } },
这里我现在本地测试 通过Laravel作为后端来提供的数据校验 实际项目中的话可以再结合数据库
//用户验证路由 Route::group(['prefix'=>'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验证
复制代码 代码如下:
<span v-if="!$v.newUser.name.isUnique">用户名已经被注册</span>
显示结果应该是这样的:
5.自定义验证
同样的我们不仅可以使用它提供给我们的验证规则 我们也可以自定义验证规则并与之前的进行组合
官方给出了一个简单实例:
export default value => { if (Array.isArray(value)) return !!value.length return value === undefined || value === null ? false : !!String(value).length }