JavaWeb开发——注册登录的表单验证

在JavaWeb项目的开发中，注册与登录的格式验证是最基础的一个功能，不知你是否厌倦了alert弹窗警告，或许我们可以尝试在表单旁边输出提示信息。

接下来，让我们通过 javascript 来实现基本的格式验证。

<script language="javascript">
//flag1、flag2、flag3、flag4用来判断上一个表单信息是否填写正确var flag1 = 0; function checkName(){var name = document.form.userName.value; //获取表单的信息var reg=/^\w{3,10}$/; //验证格式，3-10位字母、数字或下划线if(name == ""){//格式错误，在namespan框中显示提示信息document.getElementById("namespan").innerHTML = "用户名不能为空"; //重新获取该表单的焦点document.form.userName.focus(); return false;}else if(name.length<3||name.length>10){//格式错误，在namespan框中显示提示信息document.getElementById("namespan").innerHTML = "格式错误，长度为3-10个字符";//重新获取该表单的焦点document.form.userName.focus();return false;}else if(!(reg.test(name))){//格式错误，在namespan框中显示提示信息document.getElementById("namespan").innerHTML = "格式错误，只能是字母、数字或下划线";//重新获取该表单的焦点document.form.userName.focus();return false;}else{flag1 = 1;//格式正确，红色提示信息变为空document.getElementById("namespan").innerHTML = "";return true;}}var flag2 = 0;function checkPassword(){if(flag1){var password = document.form.password.value; //获取表单的信息var reg = /^[a-z0-9]+$/; //验证格式，只能为字母、数字if(password == ""){//格式错误，在passspan框中显示提示信息document.getElementById("passspan").innerHTML = "密码不能为空";//重新获取该表单的焦点document.form.password.focus();return false;}else if(password.length<6){//格式错误，在passspan框中显示提示信息document.getElementById("passspan").innerHTML = "格式错误，长度最少为6位";//重新获取该表单的焦点document.form.password.focus();return false;}else if(!(reg.test(password))){//格式错误，在passspan框中显示提示信息document.getElementById("passspan").innerHTML = "格式错误，密码为字母或数字";//重新获取该表单的焦点document.form.password.focus();return false;}else{flag2 = 1;//格式正确，红色提示信息变为空document.getElementById("passspan").innerHTML = "";return true;}}}var flag3 = 0;function checkAgain(){if(flag2){var password = document.form.password.value;//获取密码信息var againpw = document.form.againpw.value;//获取确认密码信息if(password!=againpw){//比较密码是否一致//格式错误，在againspan框中显示提示信息document.getElementById("againspan").innerHTML = "密码不一致";//重新获取表单焦点document.form.againpw.focus();return false;}else{flag3 = 1;//格式正确，红色提示信息变为空document.getElementById("againspan").innerHTML = "";return true;}}}var flag4 = 0;function checkTel(){if(flag3){var tel = document.form.tel.value;//获取电话var reg = /^1[34578]\d{9}$/;//手机号格式，共11位，开头必须为1if(tel == ""){//格式错误，在telspan框中显示提示信息document.getElementById("telspan").innerHTML = "手机号不能为空";//重新获取表单焦点document.form.tel.focus();return false;}else if(!(reg.test(tel))){//验证格式//格式错误，在telspan框中显示提示信息document.getElementById("telspan").innerHTML = "格式错误,请输入正确的手机号";//重新获取表单焦点document.form.tel.focus();return false;}else{flag4 = 1;//格式正确，红色提示信息变为空document.getElementById("telspan").innerHTML = "";return true;}}}function checkEmail(){if(flag4){var email = document.form.email.value;//获取emailvar reg = /^([A-Za-z0-9_\-\.\u4e00-\u9fa5])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,8})$/;//邮箱的格式if(email == ""){//格式错误，在emailspan框中显示提示信息document.getElementById("emailspan").innerHTML = "邮箱不能为空";//重新获取表单焦点document.form.tel.focus();return false;}else if(!(reg.test(email))){//验证格式//格式错误，在emailspan框中显示提示信息document.getElementById("emailspan").innerHTML = "格式错误，请输入正确的邮箱";//重新获取表单焦点document.form.email.focus();return false;}else{//格式正确，红色提示信息变为空document.getElementById("emailspan").innerHTML = "";return true;}}}
</script>

对应的表单设置：

<body><div class="content" style="width:100%;text-align:center"><form name="form" action="#" method="post"><table style="margin: auto"><div class="line"></div><font size="5">注册</font><div class="line"></div><br><br><tr><td align="right">用户名</td><td align="left"><input type="text" id="userName" name="userName" placeholder="请输入3-10位字母、数字或下划线" onblur="checkName()"/></td><td id="namespan" style="color: red;font-size:12px;text-align:left;width:110px"></td></tr><tr><td align="right">密   码</td><td align="left"><input type="password" id="password" name="password" placeholder="请输入至少6位字母、数字" onblur="checkPassword()"/></td><td id="passspan" style="color: red;font-size:12px;text-align:left;width:110px"></td></tr><tr><td align="right">确认密码</td><td align="left"><input type="password" id="againpw" name="againpw" placeholder="请再次确认密码" onblur="checkAgain()" ></td><td id="againspan" style="color: red;font-size:12px;text-align:left;width:110px"></td></tr><tr><td align="right">手机号</td><td align="left"><input type="text" id="tel" name="tel" placeholder="请输入手机号" onblur="checkTel()"/></td><td id="telspan" style="color: red;font-size:12px;text-align:left;width:110px"></td></tr><tr><td align="right">邮    箱</td><td align="left"><input type="text" id="email" name="email" placeholder="请输入邮箱" onblur="checkEmail()" /></td><td id="emailspan" style="color: red;font-size:12px;text-align:left;width:110px"></td></tr><tr><td colspan="3" align="center"><input type="submit" id="sign" value="注册"/></td></tr><tr><td colspan="2" align="right">已有账号？<a href="#" style="color:#458fce">立即登录</a></td></tr></table></form></div>
</body>

JavaWeb开发——注册登录的表单验证相关推荐

JavaScript实现注册页面的表单验证
基于javaweb的学习以及为后面做项目做基础,其次参考资料做了些琢磨来实现这个登录界面的注册的验证,下面是效果图(顺便附加素材) 下面是代码展示 1.注册界面register.html <!D ...
通过Ajax实现注册登陆的表单验证，一看就会。
前言: ajax的简单应用,简单好懂.本次运用的软件为ideal,使用的是tomcat服务器,无框架编程. AJAX是什么 Asynchronous JavaScript And XML 是一种通过J ...
微信小程序开发之表单验证（WxValidate使用）
微信小程序的开发框架个人感觉大体上跟VUE是差不多的,但是他的表单组件没有自带的验证功能,因此开发小程序的表单验证时候一般有两种方法,一是自己裸写验证规则,但是需要比较扎实的正则表达式基础,一种是利用 ...
ThinkPhp框架：父类及表单验证
这个知识点,就可以通过"登录"和"注册"的页面来学习这个知识点了首先先做一个"登录"功能一.登录功能(父类) (1)登录的控制器在我的 ...
angularjs学习第四天笔记（第一篇：简单的表单验证）
您好,我是一名后端开发工程师,由于工作需要,现在系统的从0开始学习前端js框架之angular,每天把学习的一些心得分享出来,如果有什么说的不对的地方,请多多指正,多多包涵我这个前端菜鸟,欢迎大家的点 ...
黄聪： Bootstrap之Form表单验证神器： BootstrapValidator（转）
前言:做Web开发的我们,表单验证是再常见不过的需求了.友好的错误提示能增加用户体验.博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator.今天就来 ...
bootstrap 表单验证
前言:做Web开发的我们,表单验证是再常见不过的需求了.友好的错误提示能增加用户体验.博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator.今天就来 ...
bootstrap from必填_bootstrap 表单验证使用方法
前言:做Web开发的我们,表单验证是再常见不过的需求了.友好的错误提示能增加用户体验.博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator.今天就来 ...
JavaWeb前端开发注册表单验证
注册表单验证最近在尝试学习开发一个网站,现将登录页面的表单验证总结如下表单校验分析 1.用户名:单词字符,8到20位 2.密码:单词字符,8到20位 3.email:邮箱格式 4.姓名:汉字非空 ...
Flask项目实战——6—(前台用户模型、前台登录注册、图形验证码、手机短信验证码、添加表单验证短信验证码请求)
1.前台用户模型前台用户模型定义创建前台模型文件 apps/front/models.py # -*- encoding: utf-8 -*- """ @File : ...

JavaWeb开发——注册登录的表单验证

在JavaWeb项目的开发中，注册与登录的格式验证是最基础的一个功能，不知你是否厌倦了alert弹窗警告，或许我们可以尝试在表单旁边输出提示信息。

接下来，让我们通过 javascript 来实现基本的格式验证。

对应的表单设置：

JavaWeb开发——注册登录的表单验证相关推荐

最新文章

热门文章