文本框检查

以下是文本框的验证步骤。

1.获取要验证的文本框的值，

2.设置值的判断条件，使用if语句或switch语句实现。

3.如果满足条件，验证通过，返回值为真。

4.如果不满足条件，返回值为假，输出验证的提示信息，而不是文本。

5.表单获取多个已验证的返回值，执行逻辑运算，并将参数传递给表单的onsubmit事件。

6.在input中调用check函数，我使用onblur事件来触发check函数。

下拉框复选框

与文本框相比，下拉框的勾选略有不同。下拉框中选项的返回值为value，用户的选择由select中的name值获得。因此，下拉框中的check函数获取select by id中的值，并根据该值值是空值还是其他非法值做出不同的判断，其余步骤与文本框中的步骤相同。

表单检查样式如下：

遇到的问题

验证表单时出现问题，但表单仍然可以提交？原因：onsubmit事件有一个默认参数作为提交操作，该参数的默认值为true。如上所述，如果满足条件要求，则返回true，否则返回false。应为每个检查设置布尔类型的返回值。如果所有检查都通过了，表格就可以正常提交了。只要有一项不符合条件，表格就不能提交，需要重新录入。因此，需要对每个校验函数的返回值进行逻辑运算。如果所有值都为真，那么最后返回到onsubmit的值为真，否则为假，onsubmit的参数为假，则不提交。因此，表单检查失败时会阻止提交。开头输入错误内容，更改正确内容后提示仍是之前的提示？原因：返回值为真时，输出提示信息的文本内容为空，即document . getelementbyid(“what”)。innerHTML=onchange和on bulr事件都可以用来触发验证，失去焦点后两者都会实现验证。但是，当on bulr触发验证时，可能会提示输入内容因用户间歇性输入而不符合要求。表单验证的Js代码段无法在所有页面加载后加载。码组

以下是程序源代码：

script function validateUsername(){ var input=document . my form . username . value；if(input==" " | | input==null){ document . my form . username . focus()；Document.getelementbyid ("uname ")。innerhtml=“用户名不能为空！”；返回false} else if(input . length 5 | | input . length 2){ document . getelementbyid(" uname ")。innerhtml="用户名在2~5位数"；document . my form . username . focus()；返回false} else { document . getelementbyid(" uname ")。innerHTML=返回真；} }函数validatePassword(){ var password=document . my form . password . value；if(password==" " | | password==null){ document。getelementbyid(“ups”)。innerhtml=“密码不能为空！”；document . my form . password . focus()；返回false} else if(密码。长度12 | |密码。长度6){文档。getelementbyid(“ups”)。innerhtml="密码在6~12位"；document . my form . password . focus()；返回false} else { document . getelementbyid(" ups ")。innerHTML=返回真；} }函数validatepasswordstream(){ var PSW=document . my form . PSW . value；var password=document . my form . password . value；if(psw！=password){ document . getelementbyid(" upssa ")。innerhtml="密码输入两次不同"；返回false} else { document . getelementbyid(" upssa ")。innerHTML=返回真；} }函数validateGroup(){ var select=document . getelementbyid(" select ")；如果(选择。value=="none") {document。getelementbyid(“group id”)。innerhtml=“请选择分组！”；返回false} else { document . getelementbyid(" GrouPid ")。innerHTML=返回真；} }函数validate form(){ var flag=validate username()(validate password())validate group()；if(flag){返回true}否则返回false}```html

div class='warp' h1新用户注册/h1表单操作='/my project/admin/addUser ' name=' my form ' on submit=' return validateForm()' div class=' form-warp ' ul Li用户名称：input class=' input ' type=' text ' name=' userName ' placeholder='请输入.'on bulr=' validateUsername()'//Li Li密码：input class=' input ' type=' password ' name=' password ' id=' password ' placeholder='请输入.'on bulr=' validatePassword()'//Li Li确认密码：input class=' input ' type=' password ' name=' PSW ' id=' PSW ' placeholder='请输入.'on bulr=' validatepasswordremy()'//Li Li真实姓名：input class=' input ' type=' text ' name=' real name '占位符='请输入.'//李莉分组：选择名称=' group。' id ' id=' select ' on bulr=' validateGrouP()'选项值='NONE '请选择./option #将组作为组列出选项值=' $ { group。id } ' $ { group。名称}/选项/#列表/选择/Li Li输入类型='提交'值='提交id=' button '/Li/ulul class=' validate ' Li id=' uname '/Li Li id=' upss '/Li Li id=' upssa '/Li Li id=' GrouP id '/Li/ul/div/form/div ' '总结

以上所述是小编给大家介绍的使用Java脚本语言进行表单校验功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！