# Be-Valid

**Repository Path**: zxj6/be-valid

## Basic Information

- **Project Name**: Be-Valid
- **Description**: layui扩展插件
常用的 身份证、社会信用代码、 手机号、座机号、邮箱、网址、数字、ip 等校验
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2025-02-28
- **Last Updated**: 2025-02-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## layui扩展插件
常用的 身份证、社会信用代码、 手机号、座机号、邮箱、网址、数字、ip 等校验


## 使用方法
1. 将[validation.js](be-validation%2Fvalidation.js)放到项目中,使用layui.config引入(用法见 https://layui.dev/docs/2/base.html)

2. 使用 beValid,并调用 beValid.verify()方法,可自定义校验规则,参考leyui自定义规则(用法见 https://layui.dev/docs/2/form/#verify)
```js
 layui.use(['form', 'beValid', 'jquery'], function () {
        let form = layui.form;
        let $ = layui.jquery;
        let beValid = layui.beValid;

        beValid.verify();//{}中可自定义,参考leyui自定义规则


        // 提交事件
        form.on('submit(demo1)', function (data) {
            let field = data.field; // 获取表单字段值
            // 此处可执行 Ajax 等操作
            return false; // 阻止默认 form 跳转
        });

    });
```
3. 在表单的输入空间中添加属性 iDCard 等,用于校验身份证
```html
<input id="username" type="text" name="username" lay-verify="required|iDCard" placeholder="请输入" autocomplete="off" class="layui-input">
```
4. 如果该扩展组件不满足要求,可自定义规则,或覆盖内置的校验规则
```js
layui.use(['form', 'beValid', 'jquery'], function () {
        let form = layui.form;
        let $ = layui.jquery;
        let beValid = layui.beValid;

        beValid.verify({//{}中可自定义,参考leyui自定义规则
            // 自定义校验规则(属性重名则是覆盖)
            iDCard: function (value, elem) {
                //....
            },
            // 自定义校验规则(属性不重名则是新增其他校验)
            xxx: function (value, elem) {
                //....
            },
        });


        // 提交事件
        form.on('submit(demo1)', function (data) {
            let field = data.field; // 获取表单字段值
            // 此处可执行 Ajax 等操作
            return false; // 阻止默认 form 跳转
        });

    });
```

参考
[index.html](index.html)

## 效果
![img.png](img%2Fimg.png)