Vue+Element ui中常用表单验证----手机号、座机、传真、邮箱、身份证号、数字和带小数点的数字

Vue+Element ui中常用表单验证----手机号、座机、传真、邮箱、身份证号、数字和带小数点的数字

 

情景：最近为前端form表单提交时需要验证一下几种特殊的输入数据格式进行验证，在此记录一下。

一：正则

1.手机号：

const reg = /^1[3|4|5|7|8][0-9]\d{8}$/;//11位手机号

2.座机和传真：

const reg = /^(\d{3,4}-)?\d{7,8}$/;//座机和传真格式是一样的：区号-号码

3.邮箱：

const reg = /^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/;

4.身份证号：

1. const reg = /^\d{6}(18|19|20)?\d{2}(0[1-9]|1[0-2])(([0-2][1-9])|10|20|30|31)\d{3}(\d|X|x)$/;

2. //18位从1900到2099年中间的范围验证

5.数字和带小数点的数字：

  var reg = /^-?\d{1,4}(?:\.\d{1,2})?$/;//范围0~9999小数点后1~2位

二：进入正题【注：只贴出来关键的部分】

1.form中

1. <el-form-item label="手机号码" prop="mobileNumber">

2. <el-input v-model="form.mobileNumber" />

3. </el-form-item>

4.  

5. <el-form-item label="座机号" prop="telPhone">

6. <el-input v-model="form.telPhone" />

7. </el-form-item>

8.  

9. <el-form-item label="传真" prop="fax">

10. <el-input v-model="form.fax" />

11. </el-form-item>

12.  

13. <el-form-item label="邮箱" prop="email">

14. <el-input v-model="form.email" />

15. </el-form-item>

16.  

17. <el-form-item label="身份证号" prop="cardId">

18. <el-input v-model="form.cardId" />

19. </el-form-item>

20.  

21. <el-form-item label="价格" prop="price">

22. <el-input v-model="form.price" />

23. </el-form-item>

2.data(){}中return{} 中的rules对应form中的prop属性：

1. rules: {

2. mobileNumber: [

3. { required: true, message: "请输入手机号码", trigger: "blur" },

4. { validator: isMobileNumber, trigger: "blur" }

5. ],

6. telPhone: [

7. { required: true, message: "请输入座机号", trigger: "blur" },

8. { validator: isTelOrFax, trigger: "blur" }

9. ],

10. fax: [

11. { required: true, message: "请输入传真号", trigger: "blur" },

12. { validator: isTelOrFax, trigger: "blur" }

13. ],

14. email: [

15. { required: true, message: "请输入邮箱", trigger: "blur" },

16. { validator: isEmail, trigger: "blur" }

17. ],

18. cardId: [

19. { required: true, message: "请输入身份证号", trigger: "blur" },

20. { validator: isCardId, trigger: "blur" }

21. ],

22. price: [

23. { required: true, message: "请输入价格", trigger: "blur" },

24. { validator: isPrice, trigger: "blur" }

25. ]

26. }

3.在data(){}中自定义验证规则与validator的属性对应

【1】手机号：

1. var isMobileNumber= (rule, value, callback) => {

2. if (!value) {

3. return new Error("请输入电话号码");

4. } else {

5. const reg = /^1[3|4|5|7|8][0-9]\d{8}$/;

6. const isPhone = reg.test(value);

7. value = Number(value); //转换为数字

8. if (typeof value === "number" && !isNaN(value)) {//判断是否为数字

9. value = value.toString(); //转换成字符串

10. if (value.length < 0 || value.length > 12 || !isPhone) { //判断是否为11位手机号

11. callback(new Error("手机号码格式如:138xxxx8754"));

12. } else {

13. callback();

14. }

15. } else {

16. callback(new Error("请输入电话号码"));

17. }

18. }

19. };

2.座机和传真：

1. var isTelOrFax = (rule, value, callback) => {

2. if (!value) {

3. callback();

4. } else {

5. const reg = /^(\d{3,4}-)?\d{7,8}$/;

6. const isTel = reg.test(value);

7. if (value.length < 10 || value.length > 13 || !isTel ) {//判断传真字符范围是在10到13

8. callback(new Error("座机或传真格式如:0376-1234567"));

9. } else {

10. callback();

11. }

12. }

13. };

3.邮箱：

1. var isEmail = (rule, value, callback) => {

2. if (!value) {

3. callback();

4. } else {

5. const reg = /^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/;

6. const email = reg.test(value);

7. if (!email) {

8. callback(new Error("邮箱格式如:admin@163.com"));

9. } else {

10. callback();

11. }

12. }

13. };

4.身份证号：

1. var isCardId = (rule, value, callback) => {

2. if (!value) {

3. return new Error("请输入身份证号)");

4. } else {

5. const reg = /^\d{6}(18|19|20)?\d{2}(0[1-9]|1[0-2])(([0-2][1-9])|10|20|30|31)\d{3}(\d|X|x)$/;

6. const card = reg.test(value);

7. if (!card) {

8. //判断座机为12位

9. callback(new Error("身份证格式如:423024xxxx0216xxxx"));

10. } else {

11. callback();

12. }

13. }

14. };

5.价格：

1. var isPrice = (rule, value, callback) => {

2. if (!value) {

3. callback();

4. } else {

5. var reg = /^-?\d{1,4}(?:\.\d{1,2})?$/;

6. if (reg.test(value)) {

7. callback();

8. } else {

9. callback(new Error("数字格式:0-9999或小数点后可加1到2位"));//如:1 或1.8 或1.85

10. }

11. }

12. };

最后总结一下：验证什么数据先要知道对应的正则表达，然后再根据相应的前端框架写出对应的语法规则；element+vue验证顺序：form-->prop-->rules-->validator-->自定义规则

ok 就到这里喽