正在加載....
廈門網站建設-世敏網絡科技
  • 當前位置: 首頁 > 建站百科 > 常見問題
  • JS表單驗證-12個常用的JS表單驗證

    時間:2020-09-25 瀏覽量:

    JS表單驗證-12個常用的JS表單驗證

       最近有個項目用到了表單驗證,在項目完結后的這段時間把常用的JS表單驗證demo整理了一下,和大家一起分享~~~

    1. 長度限制

    <p>1. 長度限制</p>
    <form name=a onsubmit="return test()">
    <textarea name="b" cols="40" rows="6" placeholder="不能超過50個字符!"></textarea>
    <br />
    <input type="submit" name="Submit" value="check">
    </form>
    <script language="javascript">
    function test()
    {
    if(document.a.b.value.length>50)
    {
    alert("不能超過50個字符!");
    document.a.b.focus();
    return false;
    }
    }
    </script>

    2. 只能是漢字 

    <p>2. 只能是漢字 </p>
    <input type="text" onblur="isChinese(this.value)" placeholder="請輸入中文!" />
    
    <script language="javascript">
    function isChinese(obj){
    var reg=/^[\u0391-\uFFE5]+$/;
    if(obj!=""&&!reg.test(obj)){
    alert('必須輸入中文!');
    return false;
    }
    }
    </script>

     

    以下demo中的HTML的結構與驗證中文結構相似的,在這就只寫js了哈


    3. 只能是英文字母 

    <script type="text/javascript">
    //驗證只能是字母
    function checkZm(zm){
    var zmReg=/^[a-zA-Z]*$/;
    if(zm!=""&&!zmReg.test(zm)){
    alert("只能是英文字母!");
    return false;
    }
    }
    </script>

    4. 只能是數字 

    //驗證只能為數字
    function checkNumber(obj){
    var reg = /^[0-9]+$/;
    if(obj!=""&&!reg.test(obj)){
    alert('只能輸入數字!');
    return false;
    }
    }
    </script>

     

    5. 只能是英文字母和數字 

    <script type="text/javascript">
    //驗證只能是字母和數字
    function checkZmOrNum(zmnum){
    var zmnumReg=/^[0-9a-zA-Z]*$/;
    if(zmnum!=""&&!zmnumReg.test(zmnum)){
    alert("只能輸入是字母或者數字,請重新輸入");
    return false;
    }
    }
    </script>

     

    6. 檢驗時間大小(與當前時間比較)

    <script type="text/javascript">
    //檢驗時間大小(與當前時間比較)
    function checkDate(obj){
    var obj_value=obj.replace(/-/g,"/");//替換字符,變成標準格式(檢驗格式為:'2009-12-10')
    // var obj_value=obj.replace("-","/");//替換字符,變成標準格式(檢驗格式為:'2010-12-10 11:12')
    var date1=new Date(Date.parse(obj_value));
    var date2=new Date();//取今天的日期
    if(date1>date2){
    alert("不能大于當前時間!");
    return false;
    }
    }
    </script>

     

    7. 屏蔽關鍵字(這里屏蔽***和****)

    <script type="text/javascript">
    function test(obj) {
    if((obj.indexOf ("***") == 0)||(obj.indexOf ("****") == 0)){
    alert("屏蔽關鍵字(這里屏蔽***和****)!");
    return false;}
    }
    </script>

     

    8. 兩次輸入密碼是否相同 

    <script type="text/javascript">
    function check(){
    with(document.all){
    if(input1.value!=input2.value)
    {
    alert("密碼不一致")
    input1.value = "";
    input2.value = "";
    }
    else {
    alert("密碼一致");
    document.forms[0].submit();
    }
    }
    }
    </script>

     

    9. 表單項不能為空 

    <script language="javascript">
    function CheckForm(obj)
    {
    if (obj.length == 0) {
    alert("姓名不能為空!");
    return false;
    }
    return true;
    alert("姓名不能為空!");
    }
    </script>

     

    10. 郵箱驗證

    <script language="javascript">
    function test(obj){
    //對電子郵件的驗證
    var myreg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
    if(!myreg.test(obj))
    {
    alert('請輸入有效的郵箱!');
    return false;
    }
    }
    </script>

     

    11. 驗證手機號

    <script type="text/javascript">
    function validatemobile(mobile)
    {
    if(mobile.length==0)
    {
    alert('手機號碼不能為空!');
    return false;
    }
    if(mobile.length!=11)
    {
    alert('請輸入有效的手機號碼,需是11位!');
    return false;
    }
    
    var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
    if(!myreg.test(mobile))
    {
    alert('請輸入有效的手機號碼!');
    return false;
    }
    }
    </script>

     

    12. 驗證身份證號碼(需是有效身份證)

    <script type="text/javascript">
    // 構造函數,變量為15位或者18位的身份證號碼
    function clsIDCard(CardNo) {
    this.Valid=false;
    this.ID15='';
    this.ID18='';
    this.Local='';
    if(CardNo!=null)this.SetCardNo(CardNo);
    }
    // 設置身份證號碼,15位或者18位
    clsIDCard.prototype.SetCardNo = function(CardNo) {
    this.ID15='';
    this.ID18='';
    this.Local='';
    CardNo=CardNo.replace(" ","");
    var strCardNo;
    if(CardNo.length==18) {
    pattern= /^\d{17}(\d|x|X)$/;
    if (pattern.exec(CardNo)==null)return;
    strCardNo=CardNo.toUpperCase();
    } else {
    pattern= /^\d{15}$/;
    if (pattern.exec(CardNo)==null)return;
    strCardNo=CardNo.substr(0,6)+'19'+CardNo.substr(6,9)
    strCardNo+=this.GetVCode(strCardNo);
    }
    this.Valid=this.CheckValid(strCardNo);
    }
    // 校驗身份證有效性
    clsIDCard.prototype.IsValid = function() {
    return this.Valid;
    }
    // 返回生日字符串,格式如下,1981-10-10
    clsIDCard.prototype.GetBirthDate = function() {
    var BirthDate='';
    if(this.Valid)BirthDate=this.GetBirthYear()+'-'+this.GetBirthMonth()+'-'+this.GetBirthDay();
    return BirthDate;
    }
    // 返回生日中的年,格式如下,1981
    clsIDCard.prototype.GetBirthYear = function() {
    var BirthYear='';
    if(this.Valid)BirthYear=this.ID18.substr(6,4);
    return BirthYear;
    }
    // 返回生日中的月,格式如下,10
    clsIDCard.prototype.GetBirthMonth = function() {
    var BirthMonth='';
    if(this.Valid)BirthMonth=this.ID18.substr(10,2);
    if(BirthMonth.charAt(0)=='0')BirthMonth=BirthMonth.charAt(1);
    return BirthMonth;
    }
    // 返回生日中的日,格式如下,10
    clsIDCard.prototype.GetBirthDay = function() {
    var BirthDay='';
    if(this.Valid)BirthDay=this.ID18.substr(12,2);
    return BirthDay;
    }
    // 返回性別,1:男,0:女
    clsIDCard.prototype.GetSex = function() {
    var Sex='';
    if(this.Valid)Sex=this.ID18.charAt(16)%2;
    return Sex;
    }
    // 返回15位身份證號碼
    clsIDCard.prototype.Get15 = function() {
    var ID15='';
    if(this.Valid)ID15=this.ID15;
    return ID15;
    }
    // 返回18位身份證號碼
    clsIDCard.prototype.Get18 = function() {
    var ID18='';
    if(this.Valid)ID18=this.ID18;
    return ID18;
    }
    // 返回所在省,例如:上海市、浙江省
    clsIDCard.prototype.GetLocal = function() {
    var Local='';
    if(this.Valid)Local=this.Local;
    return Local;
    }
    clsIDCard.prototype.GetVCode = function(CardNo17) {
    var Wi = new Array(7,9,10,5,8,4,2,1,6,3,7,9,10,5,8,4,2,1);
    var Ai = new Array('1','0','X','9','8','7','6','5','4','3','2');
    var cardNoSum = 0;
    for (var i=0; i<CardNo17.length; i++)cardNoSum+=CardNo17.charAt(i)*Wi[i];
    var seq = cardNoSum%11;
    return Ai[seq];
    }
    clsIDCard.prototype.CheckValid = function(CardNo18) {
    if(this.GetVCode(CardNo18.substr(0,17))!=CardNo18.charAt(17))return false;
    if(!this.IsDate(CardNo18.substr(6,8)))return false;
    var aCity={11:"北京",12:"天津",13:"河北",14:"山西",15:"內蒙古",21:"遼寧",22:"吉林",23:"黑龍江 ",31:"上海",32:"江蘇",33:"浙江",34:"安徽",35:"福建",36:"江西",37:"山東",41:"河南",42:"湖北 ",43:"湖南",44:"廣東",45:"廣西",46:"海南",50:"重慶",51:"四川",52:"貴州",53:"云南",54:"西藏 ",61:"陜西",62:"甘肅",63:"青海",64:"寧夏",65:"新疆",71:"臺灣",81:"香港",82:"澳門",91:"國外"};
    if(aCity[parseInt(CardNo18.substr(0,2))]==null)return false;
    this.ID18=CardNo18;
    this.ID15=CardNo18.substr(0,6)+CardNo18.substr(8,9);
    this.Local=aCity[parseInt(CardNo18.substr(0,2))];
    return true;
    }
    clsIDCard.prototype.IsDate = function(strDate) {
    var r = strDate.match(/^(\d{1,4})(\d{1,2})(\d{1,2})$/);
    if(r==null)return false;
    var d= new Date(r[1], r[2]-1, r[3]);
    return (d.getFullYear()==r[1]&&(d.getMonth()+1)==r[2]&&d.getDate()==r[3]);
    }
    
    function valiIdCard(idCard){
    var checkFlag = new clsIDCard(idCard);
    if (!checkFlag.IsValid()) {
    alert("輸入的身份證號無效,請輸入真實的身份證號!");
    document.getElementByIdx("idCard").focus();
    return false;
    }else{
    alert("是有效身份證!");
    }
    }
    </script>


    加載中~
    加載中~

    您已成功復制微信號,去微信立即添加好友!

    點擊下方復制按鈕,復制微信號!

    jzm866081

    http://www.523235.tw
    廈門世敏網絡科技有限公司

    點擊這里給我發消息
    嘿!有什么能幫到您的嗎?
    (^ω^)MG星尘怎么玩 竞彩足球胜平负澳客网 买股票技巧早上早点买 美人捕鱼技巧 搞笑棋牌麻将电影 排列五历史开奖号码 彩票停售 EA真人-官网平台 云南快乐10分基本走势图 狗狗币价格今日的价格表 黄金岛江西麻将下精 北京时时彩开奖 一 Welcome 彩集规则 河内5分彩数据提前知道 重庆快乐10分APP苹果_官网下载 广西快乐10分官方网站 足彩胜负彩