form表单输入框JS校验

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;
        }
    }