友好from交互，原生js实现表单验证

js文件

/*
 * @Author: YuanGe 1842348771@qq.com
 * @Date: 2022-05-30 12:55:53
 * @LastEditors: wuyue.nan
 * @LastEditTime: 2022-05-31 12:51:26
 * @FilePath: \test\test.js
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */

/**
 * @description: 初始化
 * @param {*} _parameter
 * @return {*}
 * @author: wuyue.nan
 */
function init(_parameter) {
    //验证规则
    var verfiy = _parameter.verfiy || [];
    //表单类型
    var FROMTYPE = _parameter.type || 1;
    //内置验证规则
    var regular = {
        'number': {
            z: /^[0-9]*$/,
            msg: '此项只能输入数字'
        },
        'phone': {
            z: /^1[34578]\d{9}$/,
            msg: '请输入正确的手机号'
        },
        'email':{
            z:/w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*/,
            msg:'请输入正确的邮箱地址'
        },
        'float2':{
            z:/^(([0-9]+|0)\.([0-9]{2}))$/,
            msg:'请输入正确的格式'
        }
    };
    //合并自定义的规则
    var regular = !_parameter.regula ? regular : Object.assign(regular, _parameter.regula);
    //验证成功回调
    var success = _parameter.success || function() {};
    //失败回调
    var error = _parameter.error || function() {};
    //from Dom
    var from = document.getElementById(_parameter.id);
    //添加inpout事件
    document.getElementById(_parameter.subid).addEventListener("click", function() {
        sub()
    });
    /**
     * @description:  提交前的验证
     * @return {*} 
     * @author: wuyue.nan
     */
    function sub() {

        from.setAttribute("onsubmit", "return false");
        for (const key of verfiy) {
            let input = document.querySelector(`[name=${key.name}]`);
            //添加input输入监听当用户输入内容时取消提示信息的显示
            input.oninput =input.oninput || function() {
                input.setCustomValidity('');
            }
            let value = input.value;
            //自定义验证函数
            var f = key.f || function(){return true;}
            f = f(value);
            //正则类型严重与自定义验证
            if (!regular[key.z].z.test(value) && f) {
                //验证失败设置错误信息
                input.setCustomValidity(regular[key.z].msg);
                //显示错误信息
                input.reportValidity();
                //调用失败回调
                error();
                return;
            }
        }
        //所有验证通过成功回调
        success();
    }

export {
    init
};

使用

<script type="module">
    import { init } from "./test.js";


    init({
        id: 'yg-from',
  
        subid: 'sub',
        verfiy: [
            {
                name: 'name',
                z: 'number',
                f: function (value) {

                },
            },
            {
                name: 'old',
                z: 'float2',
                f: function (value) {

                },
            },
        ],
        success: function () {
            console.log('全部通过');
        },
        error: function () {
            console.log("验证没有通过");
        }
    });

</script>

参数说明

参数名	类型	说明
id	string	from标签id
subid	string	提交按钮id
verfiy	json	需要验证的每一项，后面有详细说明
success	function	成功回调
error	function	失败回调

verfiy参数说明

参数名	类型	说明
name	string	input的name属性名
z	string	要验证的正则名
f	function	额外的自定义验证