20200716123300.png
利用AJAX實時驗證客戶的輸入非常方便闸盔,但是需要每個頁面都要加入腳本,如果能夠封裝好驗證的代碼颜说,這樣就可以在From表單的Input中直接調(diào)用了背零,就更加方便了腰吟!以下就是封裝的腳本:
/**
* 實時驗證表單輸入
* @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){
// 設(shè)置基本信息
var msg = document.getElementById("__ALERT__");
// 值不為空時
if(obj.value.length!=0){
// alert(obj.value);
$.ajax({ // Ajax請求數(shù)據(jù)
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傳遞的數(shù)據(jù)
$value = trim(request()->param('name'));
// 將表單提交的數(shù)據(jù)交給User模型去處理
$record = Db::table('tp5_version')->where('version', $value)->find();
// 根據(jù)返回結(jié)果判斷
if ($record) {
$data['result'] = '您輸入的版本號已經(jīng)存在,請您更換新的版本號 :(';
} else {
$data['result'] = '您輸入的版本號可以使用:)';
}
// 返回字符串
return json($data);
}
}