在vue中实现表单验证

本篇主要讲述如何基于NUXT的validate 方法实现表单的验证。

将验证方法封装后，使用的时候只需像:rules="filter_rules({required:true,type:'mobile'})"这么一行代码便可在页面中实现验证了。

首先看一下实现效果

                                                          

一、新建一个validate.js文件：

该文档中放所需的一些验证规则，下面直接看代码：

​
/**

* Created by jiachenpan on 16/11/18.

**/



export function isvalidUsername (str) {

const valid_map = ['admin', 'editor']

return valid_map.indexOf(str.trim()) >= 0

}

// 非负数

export function noFuNumber (str) {

const reg = /^\d+(\.{0,1}\d+){0,0}$/

return reg.test(str)

}

// 手机号

export function isvalidMobile (str) {

const reg = /^1(3|4|5|7|8)\d{9}$/

return reg.test(str)

}

// 中文、英文、数字

export function regexn (st