form表单输入框JS校验
在填写form表单的输入框时,需要校验对应数据是否合法,以下为常用的数据JS校验函数。
输入框校验示例:(用户名)
- 在input输入框内部添加
onkeyup
函数:onkeyup="this.value=this.value.replace(/[^\u4e00-\u9fa5a-z0-9]*$/gi,'')"
- 在input输入框内部调用
onchange
函数:
onchange="pecialCharactersReplace(this)"
对应的JS函数:
//字符串清除特殊字符(允许中英文,数字)
function pecialCharactersReplace(obj) {
var pattern = new RegExp(/[^\u4e00-\u9fa5a-z0-9]*$/gi);
var value = $(obj).val();
var valueResult = "";
if(value != null && !('' == value)){
for (var i = 0; i < value.length; i++) {
valueResult = valueResult+value.substr(i, 1).replace(pattern, '');
}
}
$(obj).empty().val(valueResult);
return ;
}
校验两次的原因是,在特殊输入情况下,用户可以绕开第一种校验方法,还是可以在数据中间部分输入非法字符,因此需要在用户输入完该框之后,在此进行字符清除。
通过以上两步校验,输入的数据就可以保证其合法性。
常见的提交数据校验函数参考:
在输入框中直接编写的函数,限制用户无法输入非法字符:
//允许中英文,数字(验证用户名)
onkeyup="this.value=this.value.replace(/[^\u4e00-\u9fa5a-z0-9]*$/gi,'')"
//允许英文,数字(验证密码)
onkeyup="this.value=this.value.replace(/[^a-z0-9.@]*$/gi,'')"
//允许英文,数字,'.','@'(验证邮箱)
onkeyup="this.value=this.value.replace(/[^a-z0-9]*$/gi,'')"
//允许数字
onkeyup="this.value=this.value.replace(/\D/g,'')"
编写JS函数,当用户离开当前输入框时,再次进行校验,存在非法字符则清除
//字符串清除特殊字符(允许中英文,数字)
function pecialCharactersReplace(obj) {
var pattern = new RegExp(/[^\u4e00-\u9fa5a-z0-9]*$/gi);
var value = $(obj).val();
var valueResult = "";
if(value != null && !('' == value)){
for (var i = 0; i < value.length; i++) {
valueResult = valueResult+value.substr(i, 1).replace(pattern, '');
}
}
$(obj).empty().val(valueResult);
return ;
}
//字符串清除特殊字符(允许英文,数字)
function pecialCharactersAndChineseReplace(obj) {
var pattern = new RegExp(/\W/g);
var value = $(obj).val();
var valueResult = "";
if(value != null && !('' == value)){
for (var i = 0; i < value.length; i++) {
valueResult = valueResult+value.substr(i, 1).replace(pattern, '');
}
}
$(obj).empty().val(valueResult);
return ;
}
//字符串清除特殊字符(允许英文,数字,'.','@')
function pecialCharactersAndChineseReplaceExceptTwo(obj) {
var pattern = new RegExp(/[^a-z0-9.@]*$/gi);
var value = $(obj).val();
var valueResult = "";
if(value != null && !('' == value)){
for (var i = 0; i < value.length; i++) {
valueResult = valueResult+value.substr(i, 1).replace(pattern, '');
}
}
$(obj).empty().val(valueResult);
return ;
}
//字符串清除特殊字符(允许数字)
function pecialCharactersAndChineseAndEnglishReplace(obj) {
var pattern = new RegExp(/\D/g);
var value = $(obj).val();
var valueResult = "";
if(value != null && !('' == value)){
for (var i = 0; i < value.length; i++) {
valueResult = valueResult+value.substr(i, 1).replace(pattern, '');
}
}
$(obj).empty().val(valueResult);
return ;
}
如果是邮箱,手机号之类的,还需要校验其整体格式合法性,比如位数、数据组织形式、先后顺序、合理性。
//电话号码(区号+固话)格式校验
function checkTelePhone(obj) {
if( $(obj).val()!='' && !(/^1(3|4|5|7|8)\d{9}$/.test($(obj).val())) && !/^0\d{2,3}\d{7,8}$/.test($(obj).val())){
$(obj).tips({
side:3,
msg:'请正确输入电话号码',
bg:'#AE81FF',
time:2
});
$(obj).focus();
$(obj).css("background-color","white");
return false;
}else{
return true;
}
}
//手机号格式校验
function checkPhone(obj) {
if( $(obj).val()!='' && !(/^1(3|4|5|7|8)\d{9}$/.test($(obj).val()))){
$(obj).tips({
side:3,
msg:'请正确输入手机号码',
bg:'#AE81FF',
time:2
});
$(obj).focus();
$(obj).css("background-color","white");
return false;
}else{
return true;
}
}
//邮箱格式校验
function checkEmail(obj){
if($(obj).val() != '' && !(/^(?:[a-zA-Z0-9]+[_\-\+\.]?)*[a-zA-Z0-9]+@(?:([a-zA-Z0-9]+[_\-]?)*[a-zA-Z0-9]+\.)+([a-zA-Z]{2,})+$/).test($(obj).val())){
$(obj).tips({
side:3,
msg:'请正确输入邮箱',
bg:'#AE81FF',
time:2
});
$(obj).focus();
$(obj).css("background-color","white");
return false;
}else{
return true;
}
}