form表单输入框JS校验

在填写form表单的输入框时，需要校验对应数据是否合法，以下为常用的数据JS校验函数。

输入框校验示例：（用户名）

1. 在input输入框内部添加onkeyup函数：onkeyup="this.value=this.value.replace(/[^\u4e00-\u9fa5a-z0-9]*$/gi,'')"
2. 在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;        }    }