JS 验证相关 （及时验证与提交验证）

文本框输入内容及时判断
除了用oninput事件 还可以使用onkeyup事件键盘输入

isNaN() 判断是否为数字 

οnkeyup="if (isNaN(value)&&value!='-') execCommand('undo');"

如果是事件 然后撤销的话在事件里面加上 document.execCommand('undo');

οnkeyup="this.value=this.value.replace(/\D/g,'')"  正整数

正整数且保留俩位小数

οninput="value=value.replace(/^\./g, '0.').match(/\d+\.?\d{0,2}/)"

execCommand  相当于API里面封装了一些操作 undo是撤销之前操作

onkeyup = "this.value = this.value.replace(' ', '')"   是不许输入空格 一旦输入立即清掉

页面验证的大致几类
1：非空  2：输入内容限制 3：输入内容比较相同（邮箱）

验证地方：
1：失去焦点的验证 2：输入内容改变验证 3：提交按钮时验证 
（2一般验证方法return true或false）到时候3可以调用方法判断出来true或false  也就是一次方法2,3都去调用使用
 比如这个验证名字 提交的时候直接调用NameJudge 可以知道是否成功
var testName = NameJudge($("#Name"));
        if (!testName) {
            return;
        }
验证效果：
1：不满足的元素进行红色边框显示 2：如果是提交的话需要定位到不满足元素

运用的知识点大纲
1：事件  onblur  onkeyup
2:   红框效果   $(e).css("border-color", "#EE2700");
                      移除  $(e).removeAttr("style");
3：调到锚点 $('body,html').animate({ scrollTop: $("#ID").offset().top }, 500); //或者是$(this)

效果模板
 
一:验证名字格式 以及对名字首字符处理

//验证名字 οnblur="NameJudge(this)"
  function NameJudge(e) {
        var txt = $(e).val().trim();
        var bool = NameCheck(txt);//正则验证
        if (txt == null || txt === "") {
            $(e).css("border-color", "#EE2700");
            $(e).prev().css("color", "#EE2700");
            $('body,html').animate({ scrollTop: $("#ID").offset().top }, 500);//跳至锚点
            return false;
        } else if (!bool) {
            $(e).css("border-color", "#EE2700");
            $(e).prev().css("color", "#EE2700");
            $('body,html').animate({ scrollTop: $("#ID").offset().top }, 500);
            return false;
        }
        $(e).prev().removeAttr("style");
        $(e).removeAttr("style");
        return true;
    }
//名字正则验证
    function NameCheck(name) {      
        var s = /^[ A-Za-z]+$/;
        return s.test(name);
    }
 //格式化输入的英文字符串：单词首字母大写  οnkeyup="NameFormatting(this)"
    function NameFormatting(obj) {
        var returnStr = "";
        //if (msg == "ContacUS Name") {     //如果可以输/ 或者别的符号的时候 就做个判断 吧正则里面这个符号放开
        //    $(obj).val($(obj).val().replace(/[^a-zA-Z\s/]/g, ''));
        //}

        $(obj).val($(obj).val().replace(/[^a-zA-Z\s]/g, ''));

        var str = $(obj).val();
        if (str != "" && str != undefined) {
            returnStr = NameFormatStr(str);
            $(obj).val(returnStr);
        }
    }
    function NameFormatStr(str) {
        var returnStr = "";
        var strArry = str.split('/');
        if (strArry.length > 0) {
            var tempStr = "";
            for (var i = 0; i < strArry.length; i++) {
                if (strArry[i] == "") tempStr += "/";
                else {
                    tempStr += NameFormatStrWithSpaceCharacter(strArry[i]) + "/";
                }
            }
            returnStr = tempStr != "" ? tempStr.substring(0, tempStr.length - 1) : tempStr;
        }
        else {
            returnStr = NameFormatStrWithSpaceCharacter(str);
        }
        return returnStr;
    }
    // 首字母大写 没有间隔
    function WithOutInterval(str) {
        return str.substring(0, 1).toUpperCase() + str.slice(1).toLowerCase();
    }
    // 首字母大写 以空格间隔每个单词
    function NameFormatStrWithSpaceCharacter(str) {
        return str.toLowerCase().split(' ').map(function (repalceStr)
        { return (repalceStr.substring(0, 1).toUpperCase() + repalceStr.slice(1).toLowerCase()); }
        ).join(' ');
    }
    // 首字母大写 以 '/'间隔每个单词
    function NameFormatStrWithDiagonal(str) {
        return str.toLowerCase().split('/').map(function (repalceStr)
        { return (repalceStr.substring(0, 1).toUpperCase() + repalceStr.slice(1).toLowerCase()); }
        ).join('/');
    }

二：电话号码的验证  限制内容为数字 οnkeyup="Validate_Numbers(this)"   内容判断 οnblur="Judgephone(this)"
//验证纯数字onkeyup事件不是数字消失撤回
    function Validate_Numbers(e) {
        $(e).val($(e).val().replace(/[^0-9]/g, ''));
    }
//内容验证
   function Judgephone(obj) {
        var result = false;
        if ($(obj).val()!= "") {
            var s = /^\((\d{3})\)(\d{3})-(\d)+$/;
            var ts = s.test($(obj).val());
            if (!ts) {
                $(obj).css("border-color", "#EE2700");
                $(obj).prev().css("color", "#EE2700");
                $('body,html').animate({ scrollTop: $("#ID").offset().top }, 500);
                //window.location.hash("phone");
            } else {
                result = true;
            }
        } else {
            $(obj).css("border-color", "#EE2700");
            $(obj).prev().css("color", "#EE2700");
            $('body,html').animate({ scrollTop: $("#SpecialRequire").offset().top }, 500);
            result = false;
        }

        if (result) {
            $(obj).removeAttr("style");
            $(obj).prev().removeAttr("style");
        }
        return result;
    }

三：邮箱的验证 内容验证  匹配验证 οnblur="JudgeEmail(this,另一个input的id)"
页面input元素
<li>
                                <label class="ptf__label">Email:*</label>
                                <input type="email" id="email"  placeholder="Email" οnblur="JudgeEmail(this, 'retypeEmail')" @*class="restrict-width"*@>
                            </li>
                            <li>
                                <label class="ptf__label">Confirm Email:*</label>
                                <input type="email" id="retypeEmail" placeholder="Email" οnblur="JudgeEmail(this, 'email')">
                            </li>
  function JudgeEmail(e,str) {
        $(e).next().html("");
        $('#retypeEmail').next().html(""); //retypeEmail 是验证邮箱的input id
        var txt = $(e).val().trim();
        var email = $("#" + str).val().trim();
        var bool = EmailCheck(txt);
        var result = true;
        if (txt == null || txt === "") {
            $(e).css("border-color", "#EE2700");
            $(e).prev().css("color", "#EE2700");
            $('body,html').animate({ scrollTop: $("#ID").offset().top }, 500);
            result = false;
        } else if (!bool) {
            $(e).css("border-color", "#EE2700");
            $(e).prev().css("color", "#EE2700");
            $('body,html').animate({ scrollTop: $("#ID").offset().top }, 500);
            result = false;
        }

        if (email !== "") {
            if (email !== txt) {
                $("#ss").show();
                $(e).css("border-color", "#EE2700");
                $(e).prev().css("color", "#EE2700");
                $('body,html').animate({ scrollTop: $("#ID").offset().top }, 500);
                result = false;
            }
        }

        if (result) {
            $(e).removeAttr("style");
            $(e).prev().removeAttr("style");
            $("#" + str).removeAttr("style");
            $("#" + str).prev().removeAttr("style");
            $("#ss").hide();
            return true;
        }
    }
//验证邮箱规则
function EmailCheck(email) {
    //var s = /^(\w+[_|\_|\.|\-]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.|\-]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
  
    var s = new RegExp(/^[\w\-\.]+@[\w\-\.]+(\.\w+)+$/);
    return s.test(email.toLowerCase());
}

四：日期比大小规则
流程：获取俩个日期的值   进行new date转化日期模式  通过formatdate方法 转成想要模式
  var t_datefrom = $("#datefrom").val();
        var t_dateto = $("#dateto").val();
        var date1 = new Date(t_datefrom);
        var date2 = new Date(t_dateto);
        var t_date1 = formatDate(date1);
        var t_date2 = formatDate(date2);
 var formatDate = function (date) {
        var y = date.getFullYear();
        var m = date.getMonth() + 1;
        m = m < 10 ? '0' + m : m;
        var d = date.getDate();
        d = d < 10 ? ('0' + d) : d;
        return y + '-' + m + '-' + d;
    };

五：下拉框验证数据 绑定数据
验证数据就是 onchange 的时候如果为空 就加上红框效果 调至锚点
绑定数据  俩种情况 一种是自动绑定 也就是上一级变动之后绑定  一种是手动绑定 
但是方法用一个就行传参数为上级id   手动的就传$(this).val()

  //城市列表手动选择改变
    function ChangeCitys(CountryID ) {       
        $.ajax({
            type: 'POST',
            dataType:'JSON',
            url: "/Home/GetAACity",
            data: { "CountryID": CountryID, "languagesId": 1 },
            success: function (data) {
                if (data.Mes != "nodata") {
                    //绑定数据  放入下拉框
                    EvalAACity(data.Lists, e);

                }
                else {
                    $(e).parent().parent().next().children().eq(1).html("<li><span>Nothing selected</span></li>");

                }
            },

        });
    }
   //绑定城市列表下拉框
    function EvalAACity(data, e) {
        var list = eval(data);//eval其实用不用都行 直接遍历date也可以
        var htmlStr = "";
        for (var item in list) {

            htmlStr += "<li><label class='tick-check-label'><div class='tick-check'><input type='checkbox' id=" + list[item].CityId + "><span class='marker'></span></div><p> " + list[item].UsCity.city_L_BasicInfo.CityName + "</p></label></li>";
            //htmlStr += "<li><input type='checkbox' class='ccc' value="  ">" + list[item].city_L_BasicInfo.CityName + "</li>";
        }
        $(e).parent().parent().next().children().eq(1).html(htmlStr);

    }