Javascript 封装表单实时验证

20200716123300.png

利用AJAX实时验证客户的输入非常方便，但是需要每个页面都要加入脚本，如果能够封装好验证的代码，这样就可以在From表单的Input中直接调用了，就更加方便了！以下就是封装的脚本：

/**
 * 实时验证表单输入
 * @Author   Yeyu2001
 * @DateTime 2020-07-16T12:16:15+0800
 * @param    {obj}          obj    表单对象自身this
 * @param    {text}         action [description]
 * 使用方法：在Form表单的input框中输入：onblur="CheckMe(this,'/index/Version/verify')"
 */
function CheckMe(obj,action){
    // 设置基本信息
    var msg  = document.getElementById("__ALERT__");
    // 值不为空时
    if(obj.value.length!=0){
        // alert(obj.value);
        $.ajax({   // Ajax请求数据
            url: action, // '/index/Version/verify'
            type: 'GET',
            dataType: 'json',
            data: {name: obj.value}
        })
        .done(function(x) { msg.innerHTML = x.result; })
        .fail(function()  { msg.innerHTML = "Verify Failed!" });
    }
}

在HTML的使用方法：

<input id="version" type="text" onblur="CheckMe(this,'/index/Version/verify')" />

在后天的ThinkPHP 5.1代码：

// 实时表单输入验证
public function verify() {
    // 只处理Ajax请求
    if (request()->isAjax()) {
        // 取得Ajax传递的数据
        $value = trim(request()->param('name'));
        // 将表单提交的数据交给User模型去处理
        $record = Db::table('tp5_version')->where('version', $value)->find();
        // 根据返回结果判断
        if ($record) {
            $data['result'] = '您输入的版本号已经存在，请您更换新的版本号 :(';
        } else {
            $data['result'] = '您输入的版本号可以使用：）';
        }
        // 返回字符串
        return json($data);
    }
}