日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔！

生活随笔

當前位置： 首頁 > 前端技术 > javascript >内容正文

javascript

JavaScript表单基本验证

發(fā)布時間：2023/12/20 javascript 23 豆豆
生活随笔 收集整理的這篇文章主要介紹了 JavaScript表单基本验证 小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

js表單基本驗證技術

  • 1.正則表達式
  • 2.表單驗證
    • 2.1表單驗證的作用
    • 2.2表單驗證思路
  • 3.文本框對象
  • 4.表單驗證
    • 4.1if實現(xiàn)驗證
    • 4.2正則表達式實現(xiàn)驗證

想要驗證用戶輸入的東西是否符合規(guī)則就要先用正則表達式給他設置個規(guī)則，使用先來看看正則表達式的符號

1.正則表達式

  • 正則表達式基本書寫符號
  • 正則表達式限定符
    限定符將可選數(shù)量的數(shù)據(jù)添加到正則表達式，下表為常用限定符：
  • 常用的限定符
  • 正則表達式中的部分匹配字符集

    • 2.表單驗證

    2.1表單驗證的作用

    • 減輕服務器的壓力
      如果沒有表單驗證那么用戶輸入的賬號密碼就要先發(fā)送到服務器驗證，這樣的話如果同時有多個設備同時發(fā)送請求那么就會很影響性能。
    • 保證輸入的數(shù)據(jù)符合要求
      如果我們在用戶輸入的時候就開始驗證，要是符合規(guī)則的話我們就可以直接發(fā)送到服務器這樣服務器就不需要驗證了直接可以接收了。

    2.2表單驗證思路

    當輸入的表單數(shù)據(jù)不符合要求時,可以使用以下方法進行提示：

  • 獲得表單元素值
  • 使用JavaScript的一些方法對數(shù)據(jù)進行判斷
  • 當表單提交時，觸發(fā) onsubmit事件，對獲取的數(shù)據(jù)進行驗證

    • 3.文本框對象

    文本框對象的屬性、方法和事件

    4.表單驗證

    4.1if實現(xiàn)驗證

    以下是if判斷實現(xiàn)一個彈出框效果的表單驗證

    <body><!-- 注冊 --><!-- onsubmit 點擊提交按鈕的時候觸發(fā) --><form action="注冊成功.html" onsubmit="return checkName()"><div><label>賬號：<input id="name" type="text" /></label></div><div><label>密碼：<input id="pwd" type="password" /></label></div><div><label> <!-- //type這里也可以寫email：郵箱格式 -->郵箱：<input id="email" type="text" /></label></div><button type="submit">注冊</button><button type="reset">清空/重置</button></form></body><script type="text/javascript">function $(id) {//通過id獲取組件并且返回return document.getElementById(id)}//驗證賬號和密碼驗證function checkName() {// 1.賬號驗證//獲取賬號組件var name = $("name").value;//判斷賬號是否為空 什么也沒有就是空白字符串 ""if ("" == name) {alert("賬號不能為空");return false;} else { //否則,用戶輸入了內容。做進一步的驗證：賬號長度必須在6-10范圍if (name.length < 6 || name.length > 10) {alert("賬號長度必須在6-10范圍")return false;}}//賬號必須是數(shù)字和大小寫的英文字母+_組合// 2.密碼驗證//2.獲取密碼組件var pwd = $("pwd").value;//判斷密碼是否為空 什么也沒有就是空白字符串 ""if ("" == pwd) {alert("賬號不能為空");return false;}//3.郵箱驗證//獲取郵箱var myEmail = $("email").value;if ("" == myEmail) {alert("郵箱不能為空");return false;} else { //用戶輸入了郵箱內容，進一步的驗證郵箱的內容是否符合規(guī)則//必須有 @和點，并且@在點前面var e1 = myEmail.indexOf("@");var e2 = myEmail.indexOf(".");if (e1 == -1 || e2 == -1) {alert("少了個@或.");return false;} else { //用戶輸入了@和點，進一步的驗證@要在點前面if (e1 > e2) {alert("@要在.前面");return false;}}}}</script>

    4.2正則表達式實現(xiàn)驗證

    這個效果的提示是在文本框的旁邊提示的這個里面添加了事件當輸入完賬號時繼續(xù)輸入密碼的時候賬號不符合規(guī)則它就會提示

    以下是通過正則表達式實現(xiàn)的表單驗證

    <!-- 注冊 --><!-- onsubmit 點擊提交按鈕的時候觸發(fā) --><!-- onkeyup:鍵盤事件 onabort：鼠標焦點事件 --><form action="注冊成功.html" onsubmit="return cheekAll()"><div><label>賬號：<input id="name" type="text" onkeyup="checkName()" /><span style="color: red;" id="sname"></span></label></div><div><label>密碼：<input id="pwd" type="password" onkeyup="checkPwd()" /><span style="color: red;" id="spwd"></span></label></div><button type="submit">注冊</button><button type="reset">清空/重置</button></form></body><script type="text/javascript">function $(id) {//通過id獲取組件并且返回 return document.getElementById(id);}//正則表達式驗證//1.賬號驗證：只能由數(shù)字和大小寫的英文字母及下劃線組成，并且長度在6-10function checkName() {//獲取賬號var name = $("name").value;var reg = /^\w{6,10}$/;if (!reg.test(name)) {$("sname").innerHTML = "賬號不符合規(guī)則";return false;} else {//清空span內容$("sname").innerHTML = "";return true;}}//1.密碼驗證：只能由數(shù)字組成，并且長度為6function checkPwd() {//獲取密碼var pwd = $("pwd").value;var reg = /^\d{6}$/;if (!reg.test(pwd)) {$("spwd").innerHTML = "密碼不符合規(guī)則";return false;} else { //輸入正確//清空span內容$("spwd").innerHTML = "";return true;}}//3.總方法function cheekAll() {//調用驗證組件的方法if (!checkName() || !cheekAll()) {return false;} else {return true;}}</script>

    總結

    以上是生活随笔為你收集整理的JavaScript表单基本验证的全部內容，希望文章能夠幫你解決所遇到的問題。

    如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。