# 表单正则验证

**Repository Path**: sin911/form_regular_validation

## Basic Information

- **Project Name**: 表单正则验证
- **Description**: 对网页表单进行验证
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2019-03-18
- **Last Updated**: 2021-08-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 表单正则验证
#### 在线预览
[http://sin911.gitee.io/form_regular_validation/](http://sin911.gitee.io/form_regular_validation/)

#### 功能介绍
对网页表单进行验证

## input，textarea

|属性 |必填|类型|值/参数| 说明 |
|--|--|--|--|--|
| el |是  |string|无| 仅限元素的name值
| handle |是  |string|默认input,[,change,blur,focus]| 触发事件
|reg|是|array\<string\>|["require","cellphone"]|正则校验.<br>具体查看`reg`属性<br>也可利用对象的`reg`属性自行扩展
|msg|是|array\<string\>|["此项必填","手机号格式错误"]|可以在fail回调函数中加以利用
|success|是|function|`curObj`|`curObj`为当前配置对象|
|fail|是|function|`curObj`,`idx`|`curObj`当前配置对象<br>`idx`reg的索引|


## radio，checkbox，select

至少有一个被勾选,则验证通过,所以无需用到正则,于是比input和textarea少了`handle`和`msg`属性

|属性 |必填|类型|值/参数| 说明 |
|--|--|--|--|--|
| el |是  |string|无| 仅限元素的name值
|msg|是|array\<string\>|["此项必须勾选"]|数组长度为1,该msg可在fail回调函数中加以利用
|success|是|function|`curObj`|`curObj`为当前配置对象|
|fail|是|function|`curObj`,`idx`|`curObj`当前配置对象<br>`idx`reg的索引|

## 添加自定义正则
若内置正则不够，可自行在原型的reg属性上添加正则方法，如下所示
```
var regResult = new WsjFormReg(config)
regResult.reg.cellphone = function (that) {
    return /^(0|86|17951)?(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])[0-9]{8}$/.test(that.value)
}
```

### DEMO
```
/*
 * 配置信息
 */
config=[
    {
            el:'email',
            handle:"input",
            reg:["email"],
            msg:["邮箱格式不对"],
            success:function(curObj){
             document.getElementById('error_email').innerHTML='格式正确'
            },
            fail:function(curObj,idx){
                /*
                 * err:   当前错误信息的描述,因为一个元素可能有多个错误信息描述
                 * curObj:当前整个对象
                */
                document.getElementById('error_email').innerHTML=curObj.msg[idx]
            }
        },
        {
            el:'introduce',
            handle:"input",
            reg:["require"],
            msg:["不能为空"],
            success:function(curObj){
             document.getElementById('error_introduce').innerHTML='正确'
            },
            fail:function(curObj,idx){
                /*
                 * err:   当前错误信息的描述,因为一个元素可能有多个错误信息描述
                 * curObj:当前整个对象
                */
                document.getElementById('error_introduce').innerHTML=curObj.msg[idx]
            }
        }
        ]
/*
 * 调用
 */
var regResult = new WsjFormReg(config)
//检查所有需要检测的表单元素，一般可用在onsubmit时
document.getElementById('show_res').onclick = function () {
    document.getElementById('res').innerHTML = regResult.checkAllStatus()
}
//检测单个表单元素
document.getElementById('show_res_one').onclick = function () {
    document.getElementById('res_one').innerHTML = regResult.isCheckBoxRadioSelectNull('hobby')
}
```

### 内置正则
[点击查看高清原图](https://images.gitee.com/uploads/images/2019/0327/103613_d3c0c288_1343259.jpeg)
![内置正则](https://images.gitee.com/uploads/images/2019/0327/103613_d3c0c288_1343259.jpeg)