实例：表单验证

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS实例_表单验证</title>
</head>
<script type="text/javascript">//username模块function focus_username() {//username表单获取焦点时的函数var resultObj = document.getElementById("result_username");//获取id=result_username的对象resultObj.style.color = "gray";//提示信息单元格的颜色resultObj.innerHTML = "请输入你的用户名";document.form1.usetname.style = "border:1px solid red;background-color:#f0f0f0";//更改边框颜色}function blur_username() {//username的验证函数var resultObj = document.getElementById("result_username");//用户名验证if (document.form1.username.value == "") {resultObj.innerHTML = "用户名不能为空";resultObj.style.color = "red";//字体颜色为红色return false;} else if (document.form1.username.value.length < 5 || document.form1.username.value.length > 20) {resultObj.innerHTML = "<font color ='red'>用户名长度必须介于5-20字符之间</font>";return false;} else {resultObj.innerHTML = "<img src='images/th11.jpg'/>";return true;}}//password模块function focus_user_password() {var resultObj = document.getElementById("result_password");resultObj.style.color = "gray";resultObj.innerHTML = "请输入你的密码";document.form1.focus_user_password.style = "border:1px solid red;background-color:#f0f0f0";}function blur_user_password() {var resultObj = document.getElementById("result_password");//密码验证if (document.form1.user_password.value.length < 5 || document.form1.user_password.value.length > 20) {resultObj.innerHTML = "密码的长度必须介于5-20之间";return false;} else if (document.form1.user_password.value == "") {resultObj.inner = "密码不能为空";return false;} else {resultObj.innerHTML = "<img src='images/th11.jpg' />";return true;}}//form提交前最后的验证函数function chlick_form() {//最终验证是否可以提交if (blur_user_password() && blur_username()) {alert("验证成功，正在上传");return true;}alert("用户名或密码输入不合法");return false;}
</script><body><form name="form1" method="post" action="login.php" οnsubmit="return chlick_form()"><table width="500" border="1" align="center" rules="all"><tr><td>用户名</td><td><input type="text" name="username" οnfοcus="focus_username()" οnblur="blur_username()" /></td><td><div id="result_username"></div></td></tr><tr><td>密码</td><td><input type="password" name="user_password" οnfοcus="focus_user_password()"οnblur="blur_user_password()" /></td><td><div id="result_password"></div></td></tr><tr><td>&nbsp;</td><td colspan="2"><!-- 合并二个单元格 --><input type="submit" value="提交表单" /><input type="reset" value="重新填写" /></td></tr></table></form></body></html>

显示效果如下：
合法输入的情况：

不合法输入的情况：

@沉木

前端：JS/33/实例：表单验证相关推荐

关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题
方法使用前需了解: 来自"和"小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查 ...
企业网站前端制作实战教程 JQuery CSS JS HTML 登录表单验证
引入重置css样式reset样式 @charset "utf-8"; html, body, div, span, applet, object, iframe, h1, h2, ...
JS(DOM对象表单验证与正则表达)
目录 DOM对象表单验证 DOM对象 <!DOCTYPE html> <html><head><meta charset="utf-8" ...
JS常用的表单验证（数字、长度,汉字，邮箱，手机号，身份证等）
1.英文字母 >>jsp,html语句 <input type="text" οnblur="checkChart(this.value)" ...
JS常用正则表达式表单验证代码大汇总
正则表达式使用详解简介简单的说,正则表达式是一种可以用于模式匹配和替换的强有力的工具.其作用如下: 测试字符串的某个模式.例如,可以对一个输入字符串进行测试,看在该字符串是否存在一个电话号码模式或 ...
js与php表单验证,JS简单表单验证功能完整示例
本文实例讲述了JS简单表单验证功能.分享给大家供大家参考,具体如下: 简单js表单验证demo Document //当用户名获取焦点时 function focus_username(){ docu ...
js 常用正则表达式表单验证代码
正则表达式使用详解简介简单的说,正则表达式是一种可以用于模式匹配和替换的强有力的工具.其作用如下: 测试字符串的某个模式.例如,可以对一个输入字符串进行测试,看在该字符串是否存在一个电话号码模式或 ...
表单必填标星_怎么用JS做form表单验证，要详细代码，求救！（带星号的是必填项）...
匿名用户 1级 2014-06-17 回答举个例子吧: <input type="text" id="telephone" > <input ...
注册表单校验 js java,JavaScript表单验证完美代码
用原生JS写一个简单的表单验证首先,是html部分新用户注册基本信息用户名: 请输入至少3位的用户名密码: 请输入4到8位的密码确认密码: 请再输入一遍密码手机号码: 请输入11位手机号 ...
JS源代码实现表单验证
今天要用JavaScript正则做一个表单验证 1.首先是HTML结构 <form action="#">账号:<input type="text&qu ...

前端：JS/33/实例：表单验证

实例：表单验证

@沉木

前端：JS/33/实例：表单验证相关推荐

最新文章

热门文章