国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > JavaScript > 正文

JS+jQuery實現注冊信息的驗證功能

2019-11-19 15:18:33
字體:
來源:轉載
供稿:網友

用JS和JQuery實現的效果是一樣的。

HTML代碼

<legend> 請填寫注冊信息</legend>  <form action="index.html" method="post">    <table style="text-align: right;">      <tr>        <td>用戶名:</td>        <td><input type="text" name="userName" placeholder="由英文字母和數字組成的4-16位字符,以字母開頭">        </td>      </tr>      <tr>        <td>昵稱:</td>        <td><input type="text" name="nickName" placeholder="由2-6個漢字組成">        </td>      </tr>      <tr>        <td>郵箱:</td>        <td><input type="text" name="email" placeholder="郵箱賬號@域名。如good@tom.com、whj@sina.com.cn">        </td>      </tr>      <tr>        <td>密碼:</td>        <td><input type="password" name="pwd" placeholder="由英文字母和數字組成的4-10位字符">        </td>      </tr>      <tr>        <td>確認密碼:</td>        <td><input type="password" name="pwd2" placeholder="確認密碼">        </td>      </tr>      <tr>        <td>手機號碼:</td>        <td><input type="text" name="phone" placeholder="手機號由11位數字組成,且以13,15,18開頭">        </td>      </tr>      <tr>        <td>出生日期:</td>        <td><input type="text" name="date" placeholder="出生日期在1990-2009之間">      </tr>      <tr>        <td colspan="2" align="left"><input type="button" name="submit" value="提交"></td>      </tr>    </table>  </form></fieldset>

CSS樣式

 body {      text-align: center;      padding: 0;      margin: 0;    }    fieldset {      width: 800px;    }    table tr td ~ td {      text-align: left;      width: 600px;    }

JS代碼

//驗證用戶名function check_userName() {  var userName = document.getElementById("name").value;  var regName = /[a-zA-Z]/w{4,16}/  if (userName == "" || userName.trim() == "") {    document.getElementById("err_name").innerHTML = "請輸入用戶名";    return false;  } else if (!regName.test(userName)) {    document.getElementById("err_name").innerHTML = "由英文字母和數字組成的4-16位字符,以字母開頭";    return false;  } else {    document.getElementById("err_name").innerHTML = "ok!!!";    return true;  }}//驗證昵稱function check_nickName() {  var nickName = document.getElementById("nick").value;  var regName = /[/u4e00-/u9fa5]{2,6}/  if (nickName == "" || nickName.trim() == "") {    document.getElementById("err_nick").innerHTML = "請輸入昵稱";    return false;  } else if (!regName.test(nickName)) {    document.getElementById("err_nick").innerHTML = "由2-6個漢字組成";    return false;  } else {    document.getElementById("err_nick").innerHTML = "ok!!!";    return true;  }}//驗證郵箱function check_email() {  var email = document.getElementById("email").value;  var regEmail = /^/w+@/w+((/./w+)+)$/;  if (email == "" || email.trim() == "") {    document.getElementById("err_email").innerHTML = "請輸入郵箱";    return false;  } else if (!regEmail.test(email)) {    document.getElementById("err_email").innerHTML = "郵箱賬號@域名。如good@tom.com、whj@sina.com.cn";    return false;  } else {    document.getElementById("err_email").innerHTML = "ok!!!";    return true;  }}//驗證密碼function check_pwd() {  var pwd = document.getElementById("pwd").value;  var regPwd = /^/w{4,10}$/;  if (pwd == "" || pwd.trim() == "") {    document.getElementById("err_pwd").innerHTML = "請輸入密碼";    return false;  } else if (!regPwd.test(pwd)) {    document.getElementById("err_pwd").innerHTML = "格式錯誤";    return false;  } else {    document.getElementById("err_pwd").innerHTML = "ok!!!";    return true;  }}//確認密碼function check_pwd2() {  var pwd = document.getElementById("pwd").value;  var pwd2 = document.getElementById("pwd2").value;  if (pwd2 == "" || pwd2.trim() == "") {    document.getElementById("err_pwd2").innerHTML = "請輸入密碼";    return false;  } else if (!pwd2.equals(pwd)) {    document.getElementById("err_pwd2").innerHTML = "兩次輸入密碼不一致";    return false;  } else {    document.getElementById("err_pwd2").innerHTML = "ok!!!";    return true;  }}//驗證手機號function check_phone() {  var phone = document.getElementById("phone").value;  var regPhone = /[13,15,18]/d{9}/;  if (phone == "" || phone.trim() == "") {    document.getElementById("err_phone").innerHTML = "請輸入手機號";    return false;  } else if (!regPhone.test(phone)) {    document.getElementById("err_phone").innerHTML = "手機號由11位數字組成,且以13,15,18開頭";    return false;  } else {    document.getElementById("err_phone").innerHTML = "ok!!!";    return true;  }}//驗證時間function check_date() {  var birthday = document.getElementById("birthday").value;  var regDate = /[13,15,18]/d{9}/;  if (birthday == "" || birthday.trim() == "") {    document.getElementById("err_date").innerHTML = "請輸入日期";    return false;  } else if (!regDate.test(birthday)) {    document.getElementById("err_date").innerHTML = "出生日期在1990-2009之間";    return false;  } else {    document.getElementById("err_date").innerHTML = "ok!!!";    return true;  }}

Jquery代碼

 $(function () {      var errMsg;      $.each($("input"), function (i, val) {        $(val).blur(function () {          if ($(val).attr("name") == "userName") {            $(".nameMsg").remove();            var userName = val.value;            var regName = /[a-zA-Z]/w{4,16}/            if (userName == "" || userName.trim() == "") {              errMsg = "<span class='nameMsg' style='color:red;'>用戶名不能為空</span>";            } else if (!regName.test(userName)) {              errMsg = "<span class='nameMsg' style='color:red;'>由英文字母和數字組成的4-16位字符,以字母開頭</span>";            } else {              errMsg = "<span class='nameMsg' style='color:red;'>OK!</span>";            }            $(this).parent().append(errMsg);          } else if ($(val).attr("name") == "nickName") {            $(".nickMsg").remove();            var nickName = val.value;            var regName = /[/u4e00-/u9fa5]{2,6}/            if (nickName == "" || nickName.trim() == "") {              errMsg = "<span class='nickMsg' style='color:red;'>昵稱不能為空</span>";            } else if (!regName.test(nickName)) {              errMsg = "<span class='nickMsg' style='color:red;'>由2-6個漢字組成</span>";            } else {              errMsg = "<span class='nickMsg' style='color:red;'>OK!</span>";            }            $(this).parent().append(errMsg);          } else if ($(val).attr("name") == "email") {            $(".emailMsg").remove();            var email = val.value;            var regEmail = /^/w+@/w+((/./w+)+)$/;            if (email == "" || email.trim() == "") {              errMsg = "<span class='emailMsg' style='color:red;'>郵箱不能為空</span>";            } else if (!regEmail.test(email)) {              errMsg = "<span class='emailMsg' style='color:red;'>郵箱賬號@域名。如good@tom.com、whj@sina.com.cn</span>";            } else {              errMsg = "<span class='emailMsg' style='color:red;'>OK!</span>";            }            $(this).parent().append(errMsg);          } else if ($(val).attr("name") == "pwd") {            $(".pwdMsg").remove();            var pwd = val.value;            var regPwd = /^/w{4,10}$/;            if (pwd == "" || pwd.trim() == "") {              errMsg = "<span class='pwdMsg' style='color:red;'>密碼不能為空</span>";            } else if (!regPwd.test(pwd)) {              errMsg = "<span class='pwdMsg' style='color:red;'>格式錯誤</span>";            } else {              errMsg = "<span class='pwdMsg' style='color:red;'>OK!</span>";            }            $(this).parent().append(errMsg);          } else if ($(val).attr("name") == "pwd2") {            $(".pwd2Msg").remove();            var pwd2 = val.value;            var pwd = $("input")[3].value;            if (pwd2 == "" || pwd2.trim() == "" || !pwd2.equals(pwd)) {              errMsg = "<span class='pwd2Msg' style='color:red;'>兩次輸入密碼不一致</span>";            } else {              errMsg = "<span class='pwd2Msg' style='color:red;'>OK!</span>";            }            $(this).parent().append(errMsg);          } else if ($(val).attr("name") == "phone") {            $(".phoneMsg").remove();            var phone = val.value;            var regPhone = /[13,15,18]/d{9}/;            if (phone == "" || phone.trim() == "") {              errMsg = "<span class = 'phoneMsg' style = 'color:red;' > 手機號不能為空 < /span>"            } else if (!regPhone.test(phone)) {              errMsg = "<span class = 'phoneMsg' style = 'color:red;' > 格式錯誤 < /span>"            } else {              errMsg = "<span class = 'phoneMsg' style = 'color:red;' > OK! < /span>"            }            $(this).parent().append(errMsg);          } else if ($(val).attr("name") == "date") {            $(".dateMsg").remove();            var birthday = val.value;            var regDate = /(199/d|200/d)[-/](0/d|1[0-2])[-/](0/d|[1-2]/d|30|31)/;            if (birthday == "" || birthday.trim() == "") {              errMsg = "<span class='dateMsg' style='color:red;'>請輸入生日</span>";            } else if (!regDate.test(birthday)) {              errMsg = "<span class='dateMsg' style='color:red;'>格式錯誤</span>";            } else {              errMsg = "<span class='dateMsg' style='color:red;'>OK!</span>";            }            $(this).parent().append(errMsg);          }        });      });    });

總結

以上所述是小編給大家介紹的JS+jQuery實現注冊信息的驗證功能,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持!

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 吉水县| 托克托县| 西乡县| 富蕴县| 县级市| 老河口市| 广饶县| 高邑县| 亳州市| 聂拉木县| 临沧市| 静宁县| 衡南县| 榆中县| 方正县| 淳安县| 潮州市| 沐川县| 广元市| 洞头县| 南溪县| 西吉县| 茌平县| 甘德县| 泰和县| 上思县| 白河县| 徐水县| 和龙市| 五指山市| 红安县| 吉首市| 建水县| 乐陵市| 乐都县| 慈利县| 彝良县| 金寨县| 石首市| 内江市| 常宁市|