应用JavaScript(一):表单验证

一、表单验证:在两个位置发生(支持JavaScript的浏览器或服务器上)

方法:通常在onsubmit事件处理程序中验证表单。

例子(1)表单验证输入格式

html代码:

应用JavaScript(一):表单验证_第1张图片

js代码

应用JavaScript(一):表单验证_第2张图片

css代码

应用JavaScript(一):表单验证_第3张图片


(2)表单验证输入是否为空

html代码

应用JavaScript(一):表单验证_第4张图片

js代码

应用JavaScript(一):表单验证_第5张图片

css代码

应用JavaScript(一):表单验证_第6张图片

(3)使用replace()方法查找字符:利用备选字符集替换特定的字符。

语法:string replace(oldSubString,newSubString);

    string.replace(regEx,newSubString);

    string.replace(regEx,function());

应用JavaScript(一):表单验证_第7张图片

css代码同上一例

PS:也可使用“|”符号匹配多个字符串:如/link|url|homepage/查找link、url、homepage的匹配

(4)利用测试和正则表达式测试字符

应用JavaScript(一):表单验证_第8张图片

js代码

应用JavaScript(一):表单验证_第9张图片

(5)选择框选项必选

html代码

应用JavaScript(一):表单验证_第10张图片

js代码

应用JavaScript(一):表单验证_第11张图片

效果:不选的话出现提示框

应用JavaScript(一):表单验证_第12张图片

如果需要得到所选项的值,则:form.selCards.options[selected].value

(6)检验Radiobutton是否选择

应用JavaScript(一):表单验证_第13张图片

js代码

应用JavaScript(一):表单验证_第14张图片

效果

应用JavaScript(一):表单验证_第15张图片

(7)检验Checkbox是否选择,如果没选择,则警示重新选择;如果选择了,就计数,然后进入之后的操作

应用JavaScript(一):表单验证_第16张图片

js代码

应用JavaScript(一):表单验证_第17张图片

效果

应用JavaScript(一):表单验证_第18张图片

最后例子

题目如下

应用JavaScript(一):表单验证_第19张图片

html的表单代码

应用JavaScript(一):表单验证_第20张图片

js代码

应用JavaScript(一):表单验证_第21张图片

应用JavaScript(一):表单验证_第22张图片

css代码

应用JavaScript(一):表单验证_第23张图片


你可能感兴趣的:(前端,html,javascript,表单验证)