JS學習筆記之表單的非空校驗

2022-07-12 22:15:22 字數 3069 閱讀 5957

一:表單的校驗是js裡的必學內容也是很重要的內容,如果使用按鈕觸發式的校驗方式會讓使用者使用體驗極差,導致產品失敗。

三:具體**實現如下

html**:

1

<

div

id="tbl"

style

=" margin:auto; height: 1000px; border: blue 1px solid;position: relative; text-align: center;"

>

23 //實現了**的垂直水平的塊居中

4<

table

style

="margin: auto; padding-top:400px ;"

>

5<

tr>

6<

td>7姓名

8td>910

<

td>

11<

span

style

="color: red;"

>12*

13span

>

14<

input

type

="text"

name

="username"

id="username"

onfocus

="of('username')"

onblur

="ob()"

required

="required"

/>

15<

span

id="usernamespan"

style

="color: gray; display: none;"

>

16span

>

17td

>

18tr

>

1920

<

tr>

21<

td>

22年齡

23td

>

2425

<

td>

26<

span

style

="color: red;"

>27*

28span

>

29<

input

type

="text"

name

="age"

id="age"

onfocus

="of('age')"

onblur

="ob()"

required

="required"

/>

30<

span

id="agespan"

style

="color: gray; display: none;"

>

3132

span

>

33td

>

34tr

>

35<

tr>

36<

td>

37賬號

38td

>

3940

<

td>

41<

span

style

="color: red;"

>42*

43span

>

44<

input

type

="text"

name

="usernumber"

id="usernumber"

/>

45<

span

id="usernumberspan"

>

4647

span

>

48td

>

49tr

>

50<

tr>

51<

td>

52密碼

53td

>

5455

<

td>

56<

span

style

="color: red;"

>57*

58span

>

59<

input

type

="password"

name

="password"

id="password"

/>

60<

span

id="passwordspan"

>

6162

span

>

63td

>

64tr

>

65table

>

66div

>

js**

1

//如果要設定不同的提示資訊,也可以通過傳參的方式進行實現

2function

of(id)9}

10function

ob()else

17 }

js 強校驗 弱校驗 js中表單的校驗

首先我們需要先建立 html 靜態頁面 的註冊頁面 建立完整個登錄檔 然後寫校驗公共的方法 提取公共的部分 function check id,reg else if reg.test val else 然後其他元素呼叫公共方法 校驗使用者名稱方法 function checkname return...

優化表單資料的JS校驗

在平常的web開發中,我經常需要在客戶端對表單的資料進行驗證。比如,我們驗證表單輸入的內容不為空 1 根據以往的經驗,我們會寫出如下的js驗證 但是,現在我有乙個業務追求 我要在頁面取得的表單資料有很多,比如有十幾二十項資料吧,那麼我們要在js 中重複的寫一部分 這樣就將頁面的 拉得很長,以至於 很...

學習筆記之springmvc校驗

messagesource class org.springframework.context.support.reloadableresourcebundlemessagesource classpath customvalidationmessage 2.2配置校驗器 2.3需要在介面卡中註冊校...