1.8.0 • Published 5 years ago
rule-input v1.8.0
rule-input
input-box with validation,基于input输入框封装,并带有验证规则
一、安装与配置
1、安装npm包
npm install rule-input
2、配置vue项目中的main.js文件
import ruleInput from'rule-input'
Vue.use(ruleInput)
二、使用说明
使用模板:
<rule-input inType="name" placeholder="请输入姓名" style=”width:50px;font-size:15px;”></rule-input>
参数:
1、inType
确定输入框类型
输入框类型 intype
姓名 name
密码 password
身份证号 idNumber
手机号 mobileNumber
邮箱 mail
用户名 userName
2、placeholder
输入框提示信息
3、style
自定义样式
4、class
自定义样式
三、验证规则
1、姓名
限制长度:1-20字;
校验格式:除“·”外不允许输入特殊字符,当输入”.”或”。”时,自动识别为”·”;
校验方式:在输入过程中进行实时校验。
2、密码
限制长度:6-20字;
校验格式:支持数字、字母大小写、标点符号(空格除外)。
校验方式:在失去焦点时进行校验。
3、邮箱
限制长度:30字
校验格式:
①邮箱格式必须为【登录名】@【主机名】.【域名】;
②邮件地址中有且仅有一个@符号,必须要有”.”,且不能以”.”作为开始或结束字符,地址中可出现多个”.”,但不能连续,如,”..”;
③登录名和主机名都不能为空;
④登录名允许使用英文字母、数字、”_”、”-”、”.”;
⑤主机名不能使用_作为开始符和结束符,不能含有/ * ? ,等字符;
⑥整个地址中不允许输入空格;
⑦当开始输入登录名时,自动推荐匹配常用邮箱地址域名。
校验方式:在失去焦点时进行校验
4、二代身份证号
限制长度:18字
校验格式:
公民身份号码是特征组合码,由十七位数字本体码和一位校验码组成。排列顺序从左至右依次为:六位数字地址码,八位数字出生日期码,三位数字顺序码和一位数字校验码(数字校验码为1-10,当为10时,用X表示)。
校验方式:在失去焦点时进行校验
5、大陆手机号
限制长度:11字;
校验格式:大陆手机号码格式为11位纯数字,从左到右依次是三位数字运营商码,四位数字地区码,四位数字顺序码,不允许输入数字外的其他字符;
校验方式:在失去焦点时进行校验。
6、用户名
限制长度:6-12位;
校验格式:由数字、汉字、字母、字符构成(空格除外)
校验方式:在失去焦点时进行校验。