提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
文章目录
- 一、JS表单验证是什么?
- 一、JS表单验证需求分析?
- 三、表单验证所需事件
- 设置from表单及其文本框,代码如下(示例):
- 2.设置触发事件函数JS代码
- 3.结果展示
- 总结
提示:以下是本篇文章正文内容,下面案例可供参考
一、JS表单验证是什么?
表单验证是javascript中的高级选项之一。JavaScript 可用来在数du据被送往服务器前对 HTML 表单中的这些输入数据进行验证。
一、JS表单验证需求分析?
表单验证需求
1、用户名不能为空
2、用户名必须在6-14位
3、用户名和密码由数字和字母组成(正则表达式)
4、密码和确认密码一致,邮箱地址合法
5、统一失去焦点验证
6、错误信息统一在span标签中显示,要求字体12号,红色,验证成功显示绿色字体
7、文本框获得焦点,清除错误信息,如果文本框中数据不合法,要求清空文本框的 value
8、最终表单所有项均合法方可提交
三、表单验证所需事件
1、所用到的三个事件:onfocus(焦点聚焦事件)、onblur(焦点离开事件)、onclick点击事件)。
2、利用事件触发函数,函数中执行校验的信息。
3、使用butten按钮提交事件
设置from表单及其文本框,代码如下(示例):
<form id="userFrom" method="get">
用户名: <input type="text" id="username" name="username">
<span id="usernameError"></span>
<br>
密码: <input type="text" id="password" name="password">
<span id="passwordError"></span>
<br>
确认密码:<input type="text" id="confirmPwd" name="confirmPwd">
<span id="confirmPwdError"></span>
<br>
邮箱地址:<input type="text" id="email" name="email">
<span id="emailError"></span>
<br>
<input type="sbutten" value="提交信息" id="submitBtn">
<input type="reset" value="重置信息" id="resetBtn">
</form>
2.设置触发事件函数JS代码
JS表单验证代码(示例):
<script type="text/javascript">
window.onload=function () {
var retVal=true;
var usernameElt=document.getElementById("username");
var usernameErrorSpan=document.getElementById("usernameError");
var usernameRegExp = /^[a-zA-Z0-9_-]{4,16}$/;
usernameElt.onblur=function () {
var username = usernameElt.value.trim();
usernameElt.value = username;
var usernameRetVal = usernameRegExp.test(username);
if (!(usernameElt.value=="")) {
if (!usernameRetVal) {
usernameErrorSpan.innerHTML = "<font color='red'>用户名不符合格式</font>";
} else {
usernameErrorSpan.innerHTML = "<font color='green'>用户名符合格式</font>";
}
}else {
usernameErrorSpan.innerHTML="<font color='red'>用户名不能为空</font>"
}
}
usernameElt.onfocus=function () {
if(!(usernameErrorSpan.innerText.indexOf("不")==-1)){
usernameElt.value="";
}
usernameErrorSpan.innerText="";
}
var passwordElt=document.getElementById("password");
var passwordErrorSpan=document.getElementById("passwordError")
var passwordRegExp=/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z\\W]{6,18}$/
passwordElt.onblur=function () {
var password=passwordElt.value.trim();
passwordElt.value=password;
if(!(passwordElt.value=="")){
var passwordRetVal=passwordRegExp.test(password);
if(passwordRetVal){
passwordErrorSpan.innerHTML="<font color='green'>密码格式正确</font>"
}else{
passwordErrorSpan.innerHTML="<font color='red'>密码格式不正确(数字和字母结合)</font>"
}
}else{
passwordErrorSpan.innerHTML="<font color='red'>密码不能为空</font>"
}
}
passwordElt.onfocus=function () {
if(!(passwordErrorSpan.innerText.indexOf("不")==-1)){
passwordElt.value="";
}
passwordErrorSpan.innerText="";
}
var confirmPwdElt=document.getElementById("confirmPwd");
var confirmPwdErrorSpan=document.getElementById("confirmPwdError");
confirmPwdElt.onblur=function () {
var confirmPwd=confirmPwdElt.value.trim();
confirmPwdElt.value=confirmPwd;
if(!(confirmPwdElt.value=="")){
if(passwordElt.value==""){
confirmPwdErrorSpan.innerHTML="<font color='red'>密码不能为空</font>"
}else{
if(passwordElt.value===confirmPwdElt.value){
confirmPwdErrorSpan.innerHTML="<font color='green'>重复密码验证成功</font>"
}else {
confirmPwdErrorSpan.innerHTML="<font color='red'>重复密码验证不成功</font>"
}
}
}else{
confirmPwdErrorSpan.innerHTML="<font color='red'>验证密码不能为空</font>"
}
}
confirmPwdElt.onfocus=function () {
if(!(confirmPwdErrorSpan.innerHTML.indexOf("失")==-1)){
confirmPwdElt.value="";
}
confirmPwdErrorSpan.innerText="";
}
var emailElt=document.getElementById("email");
var emailErrorSpan=document.getElementById("emailError")
var emailRegExp=/^\w{3,12}@\w{1,5}\.[a-z]{2,3}$/;
emailElt.onblur=function () {
var email=emailElt.value.trim();
emailElt.value=email;
var emailRetVal=emailRegExp.test(email);
if(!(emailElt.value=="")){
if(emailRetVal){
emailErrorSpan.innerHTML="<font color='green'>邮箱地址格式验证成功</font>"
}else{
emailErrorSpan.innerHTML="<font color='red'>邮箱地址格式验证不成功</font>"
}
}else {
emailErrorSpan.innerHTML="<font color='red'>邮箱地址不能为空</font>"
}
}
emailElt.onfocus=function () {
if(!(emailErrorSpan.innerText.indexOf("失")==-1)){
emailElt.value="";
}
emailErrorSpan.innerText="";
}
var submitElt=document.getElementById("submitBtn");
submitElt.onclick=function () {
if(usernameErrorSpan.innerText==""){
usernameElt.focus();
usernameElt.blur();
}
if(passwordErrorSpan.innerText==""){
passwordElt.focus();
passwordElt.blur();
}
if (confirmPwdElt.innerText==""){
confirmPwdElt.focus();
confirmPwdElt.blur();
}
if(emailElt.innerText==""){
emailElt.focus();
emailElt.blur();
}
var userFromElt=document.getElementById("userFrom");
if(usernameElt.innerText.indexOf("不")==-1||passwordElt.innerText.indexOf("不")==-1||confirmPwdElt.innerText.indexOf("不")==-1||emailElt.innerText.indexOf("不")==1){
userFromElt.action="http://localhost:8080/jd/save"
userFromElt.submit();
}
}
}
</script>
3.结果展示
该处使用的url网络请求的数据。
总结
JS代码验证总结:
1、利用触发事件实现对表单信息的验证,并使用butten按钮提交表单。
2、不适用submit提交按钮的原因:需要对四项验证内容进行验证,验证成功才能提交,submit按钮直接提交信息。
3、点击提交按钮信息后出现404错误,是因为表单IP地址有误,换一个可以使用的IP地址。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)