Demo_javascript_注册表单校验

淡淡的烟草味﹌ 2022-06-10 09:07 154阅读 0赞

对于一个注册页面，将表单中的数据提交到action指定的位置,在开发中，需要对数据进行验证，例如：邮箱，会员名，密码等不能为空，会员名长度，密码长度需要符合规定，邮箱格式要正确等，那么我们这时就需要对表单中的数据进行校验。

*需求:*  
1. 验证邮箱符合规则，并且不能为空  
2. 验证会员名密码不能为空，并且保证长度至少6位  
3. 重复密码要与密码一致.

*分析:*

验证非空  /^\s*$/
    验证邮箱符合规则，正则表达式是: /^(\w)+@(\w)+(\.\w+)+$/
    验证会员名与密码长度至少6位 /^ (\w){
        6,}$/
    验证重复密码与密码一致，我们不需要使用正则，直接比较就可以。
    对于上述操作，我们在使用时，可以使用javascript中提供的test方法完成。
    为了保证数据不正确情况下，表单不能提交，我们需要使用onsubmit，如果绑定的函数返回的是false,表单就不能被提交

*实现：*

<script type="text/javascript">
                function checkForm(){
         
                    //1.获取数据
                    var email=document.getElementById("email");
                    var username=document.getElementById("username");
                    var password=document.getElementById("password");
                    var repassword=document.getElementById("repassword");               
                    //2..验证非空
                    if(checkNull(email.value)){
                        //如果返回true,代表email为空
                        document.getElementById("email_msg").innerHTML="<font color='red'>邮箱不能为空</font>";
                        return false;
                    }
                    if(checkNull(username.value)){
                        //如果返回true,代表email为空
                        document.getElementById("username_msg").innerHTML="<font color='red'>会员名不能为空</font>";
                        return false;
                    }
                    if(checkNull(password.value)){
                        //如果返回true,代表email为空
                        document.getElementById("password_msg").innerHTML="<font color='red'>密码不能为空</font>";
                        return false;
                    }
                    if(checkNull(repassword.value)){
                        //如果返回true,代表email为空
                        document.getElementById("repassword_msg").innerHTML="<font color='red'>重复密码不能为空</font>";
                        return false;
                    }
                    //3.验证邮箱符合规则 
                    if(!checkEmail(email.value)){
                        //如果返回true,代表符合规则
                        document.getElementById("email_msg").innerHTML="<font color='red'>请输入有效的邮箱地址</font>";
                        return false;
                    }
    
                    //4.验证会员名或密码长度大于6位
                    if(!checkLength(username.value)){
                        document.getElementById("username_msg").innerHTML="<font color='red'>会员名长度必须大于6位</font>";
                        return false;
                    }
                    if(!checkLength(password.value)){
                        document.getElementById("password_msg").innerHTML="<font color='red'>会员名长度必须大于6位</font>";
                        return false;
                    }
                    //5.验证两次输入密码一致
                    if(password.value!=repassword.value){
                        document.getElementById("repassword_msg").innerHTML="<font color='red'>两次密码输入不一致</font>";
                        return false;
                    }
    
                    return true;
                }
                //验证长度
                function checkLength(data){
         
                    var reg=/^\w{6,}$/;
                    return reg.test(data);
                }
                //验证邮箱
                function checkEmail(data){
         
                    var reg=/^(\w)+@(\w)+(\.\w+)+$/;
                    return reg.test(data);
                }
                //验证非空
                function checkNull(data){
         
                    var reg=/^\s*$/; //0个或多个空字符串
                    return (reg.test(data))//如果data符合规则，返回true，否则返回false                
    
                }
    </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，154人围观）

还没有评论，来说两句吧...

相关阅读

相关 JQuery 实现注册表单校验

进行表单数据的验证可谓是很有必要的，我们都会在网页上先进行一下表单验证，然后服务器端再次进行验证，来确保用户提交数据的准确性,与减轻服务器的压力. 表单页面： <

素颜马尾好姑娘i/ 2023年10月18日 13:32/ 0 赞/ 78 阅读

相关注册表单数据的收集php,常用注册表单功能

![01eb7a2a4b94ea6be95de6035463671f.png][] 实例 html> 常用注册表单功能必填项：账号： type="text"

以你之姓@/ 2023年01月18日 02:21/ 0 赞/ 123 阅读

相关 221.登录注册表单动画

效果 (源码网盘地址在最后) ![1884199f4ac41bbe9e9211abdbb4650d.gif][] 源码 index.html <!DOC

桃扇骨/ 2022年09月09日 02:29/ 0 赞/ 137 阅读

相关注册表单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

秒速五厘米/ 2022年08月13日 13:39/ 0 赞/ 122 阅读

相关 Demo_javascript_注册表单校验

对于一个注册页面，将表单中的数据提交到action指定的位置,在开发中，需要对数据进行验证，例如：邮箱，会员名，密码等不能为空，会员名长度，密码长度需要符合规定，邮箱格式要正确

淡淡的烟草味﹌/ 2022年06月10日 09:07/ 0 赞/ 155 阅读

相关注册表单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xht

r囧r小猫/ 2022年06月08日 07:07/ 0 赞/ 158 阅读

相关 jquery实现注册表单验证

![Center][] 要求：技术要求（html+css+jquery）图标题后有 1. 完成页面布局（页面布局合理、样式和图片一致、代码无误各） 2. 用jquery

àì夳堔傛蜴生んèń/ 2022年06月07日 07:56/ 0 赞/ 269 阅读

相关注册表单验证

<script> function mr_verify(){ //获取表单对象 var ema

偏执的太偏执、/ 2022年05月16日 13:50/ 0 赞/ 159 阅读

相关使用JavaScript完成注册表单数据校验

1、需求分析用户在进行注册时会输入一些内容，但是有些用户会输入一些不合法的内容，导致服务器的压力过大。此时我们需要对用户输入的内容进行一个校验（前端校验和后端校验

逃离我推掉我的手/ 2022年04月22日 22:34/ 0 赞/ 167 阅读

相关 $.ajax注册表单

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

古城微笑少年丶/ 2021年07月24日 18:14/ 0 赞/ 395 阅读