表单注册控件的例子

最新推荐文章于 2021-09-28 21:40:52 发布
最新推荐文章于 2021-09-28 21:40:52 发布
阅读量819 收藏
点赞数
分类专栏： JavaScript 文章标签： user xmlhttprequest function ajax url null
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ycyangcai/article/details/1757142
版权
把老同事公会的注册页面的javaScript的代码弄下来。让大家PP
< script language = " JavaScript " >
// -----------------------------------------------------------------
     function  checkRegForm()
    {
         var  form  =  document.formReg;
         if (form.group_name.value.length  ==   0 )
        {
            alert( " 请输入工会名称！ " );
            form.group_name.focus();
             return   false ;
        }
         if (form.group_name.value.length  > 16 )
        {
            alert( " 工会名称不能超过16个字符！ " );
            form.group_name.focus();
             return   false ;
        }
         if (form.Group_URL.value.length  ==   0 )
        {
            alert( " 请输入工会URL地址！ " );
            form.Group_URL.focus();
             return   false ;
        }
         if (form.Group_URL.value.length  > 10 )
        {
            alert( " 工会URL地址不能超过10个字符！ " );
            form.Group_URL.focus();
             return   false ;
        }
         if (isNumber(form.Group_URL.value)){
            alert( " 工会URL地址不能全为数字！ " );
            form.Group_URL.focus();
             return   false ;
        }
         if ( ! is_url(form.Group_URL.value)){
            alert( " 请正确输入工会URL地址！只能包括英文字母、数字、下划线 " );
            form.Group_URL.focus();
             return   false ;
        }
         if (form.User_Show_Name.value.length  ==   0 )
        {
            alert( " 请输入昵称！ " );
            form.User_Show_Name.focus();
             return   false ;
        }
         if (form.User_Show_Name.value.length  > 20 )
        {
            alert( " 昵称的长度不能超过20个字符！ " );
            form.User_Show_Name.focus();
             return   false ;
        }        
         if (form.User_QQ.value.length  ==   0 )
        { // QQ
            form.User_QQ.value  =   " 0 " ;
        }
         else   if ( ! isNumber(form.User_QQ.value))
        {
            alert( " 请输入数字！ " );
            form.User_QQ.focus();
             return   false ;
        }
         if (form.User_MSN.value.length > 0   &&   ! isEmail(form.User_MSN.value))
        {
            alert( " 请正确输入MSN！ " );
            form.User_MSN.focus();
             return   false ;
        }
         if (form.User_phone.value.length > 0   &&   ! isNumber(form.User_phone.value))
        {
            alert( " 请正确输入移动电话！ " );
            form.User_phone.focus();
             return   false ;
        }
        document.formReg.submit();
        
    }
    
     var  last_groupname = "" ;
     var  last_groupurl = "" ;
    
 // ----------------------------------------------------------------------
     function  checkgroupurl() {
         var  form  =  document.formReg;
            var  groupurl = form.Group_URL.value;
      
         if (groupurl == null   ||  groupurl == ""   ||  groupurl == last_groupurl){
             return   false ;
        }
         var  grouperr = document.getElementById( " groupurlerr " ); 
         var  errinfo = document.getElementById( " groupurlerrinfo " ); 
         if (groupurl.length  > 10 )
        {
            grouperr.innerHTML = " 工会URL地址不能超过10个字符！ " ;
            errinfo.className = " errorFrame " ;
            errinfo.style.display = '' ;
            form.Group_URL.focus();
             return   false ;
        }
         if (isNumber(groupurl)){
            grouperr.innerHTML = " 工会URL地址不能全为数字！ " ;
            errinfo.className = " errorFrame " ;
            errinfo.style.display = '' ;
            form.Group_URL.focus();
             return   false ;
        }
         if ( ! is_url(groupurl)){
            grouperr.innerHTML = " 请正确输入工会URL地址！只能包括英文字母、数字、下划线 " ;
            errinfo.className = " errorFrame " ;
            errinfo.style.display = '' ;
            form.Group_URL.focus();
             return   false ;
        }
          var  ajax  =   new  ActiveXObject( " Msxml2.XMLHTTP " );
         var  url = " /include/ajax.php?action=checkgroupurl&groupurl= " + groupurl;
        ajax.open( " GET " , url,  true ); 

        ajax.onreadystatechange  =   function () { 
             if  (ajax.readyState  ==   4   &&  ajax.status  ==   200 ) { 
                 var  grouperr = document.getElementById( " grouperr " ); 
                 var  s = ajax.responseText;
                 if (s != null    &&  s != '' ){
                    groupurlerr.innerHTML =  ajax.responseText.substr( 2 );
                     var  errinfo = document.getElementById( " errinfo " ); 
                     if (s.substr( 0 , 1 ) == " e " )
                    {
                        groupurlerrinfo.className = " errorFrame " ;
                    }
                     else
                    {groupurlerrinfo.className = " rightFrame " ;}
                    groupurlerrinfo.style.display = '' ;
                } else {
                     var  errinfo = document.getElementById( " errinfo " ); 
                    groupurlerrinfo.style.display = ' none ' ;
                }
                last_groupurl = groupurl;
            } 
        }
        
        ajax.send( null ); 
    }
 // ----------------------------------------------------------------------
         function  checkgroupname() {
         var  form  =  document.formReg;
            var  groupname = form.group_name.value;
           
           var  grouperr = document.getElementById( " grouperr " ); 
           var  errinfo = document.getElementById( " errinfo " ); 
          
         if (groupname == null   ||  groupname == ""   ||  groupname == last_groupname){
             return   false ;
        }
         if ( ! checkChar(groupname))
        {
            grouperr.innerHTML = " 工会名称中不能含有特殊字符！ " ;
            errinfo.className = " errorFrame " ;
            errinfo.style.display = '' ;
            form.group_name.focus();
             return   false ;
        } 
         if (groupname.length < 2   || groupname.length > 16  )
        {
            grouperr.innerHTML = " 工会名称长度2-16位，请正确输入！ " ;
            errinfo.className = " errorFrame " ;
            errinfo.style.display = '' ;
            form.group_name.focus();
             return   false ;
        }
          var  ajax  =   new  ActiveXObject( " Msxml2.XMLHTTP " );
         var  url = " /include/ajax.php?action=checkgroupname&groupname= " + groupname;
        ajax.open( " GET " , url,  true ); 

        ajax.onreadystatechange  =   function () { 
             if  (ajax.readyState  ==   4   &&  ajax.status  ==   200 ) { 
                 var  grouperr = document.getElementById( " grouperr " ); 
                 var  s = ajax.responseText;
                 if (s != null    &&  s != '' ){
                    grouperr.innerHTML = ajax.responseText.substr( 2 );
                     var  errinfo = document.getElementById( " errinfo " ); 
                     if (s.substr( 0 , 1 ) == " e " )
                    {
                        errinfo.className = " errorFrame " ;
                    }
                     else   if (s.substr( 0 , 1 ) == " i " )
                        {
                            errinfo.className = " infoFrame " ;
                        } else
                        {errinfo.className = " rightFrame " ;}
                    errinfo.style.display = '' ;
                } else {
                     var  errinfo = document.getElementById( " errinfo " ); 
                    errinfo.style.display = ' none ' ;
                }
                last_groupname = groupname;
            } 
        }
        
        ajax.send( null ); 
    }
     function  InitAjax()
    {
         var  ajax = false ; 
         try  { 
            ajax  =   new  ActiveXObject( " Msxml2.XMLHTTP " ); 
        }  catch  (e) { 
             try  { 
                ajax  =   new  ActiveXObject( " Microsoft.XMLHTTP " ); 
            }  catch  (E) { 
                ajax  =   false ; 
            } 
        }
         if  ( ! ajax  &&   typeof  XMLHttpRequest != ' undefined ' ) { 
            ajax  =   new  XMLHttpRequest(); 
        } 
         return  ajax;
    }
 // ---------------------------------------工会宣言
     function  Group_DetailInfo()
    {
         var  form  =  document.all.formReg;
         var  Group_DetailV = form.Group_Detail.value;
         if (Group_DetailV == null   ||  Group_DetailV == "" ){
             return   false ;
        }
         var  errInfo = document.getElementById( " Group_Detailerrinfo " );
         var  err = document.getElementById( " Group_Detailerr " );
         if (Group_DetailV.length > 200 ){
            err.innerHTML =   " 长度过长，请输入200位以内的工会宣言！ " ;
            errInfo.className = " errorFrame " ;
            errInfo.style.display = '' ;
            form.Group_Detail.focus();
             return   false ;
        } else {
            err.innerHTML =   " 符合要求 " ;
            errInfo.className = " rightFrame " ; 
            errInfo.style.display = '' ;
        }
    }
 // ---------------------------------------昵称
     function  User_Show_NameInfo()
    {
         var  form  =  document.all.formReg;
         var  User_Show_NameV = form.User_Show_Name.value;
         if (User_Show_NameV == null   ||  User_Show_NameV == "" ){
             return   false ;
        }
         var  errInfo = document.getElementById( " User_Show_Nameerrinfo " );
         var  err = document.getElementById( " User_Show_Nameerr " );
         if (User_Show_NameV.length < 2   || User_Show_NameV.length > 16 ){
            err.innerHTML =   " 长度过长，请输入2-16位以内的工会宣言！ " ;
            errInfo.className = " errorFrame " ;
            errInfo.style.display = '' ;
            form.User_Show_Name.focus();
             return   false ;
        } else {
            err.innerHTML =   " 符合要求 " ;
            errInfo.className = " rightFrame " ; 
            errInfo.style.display = '' ;
        }
    }
     // ---------------------------------------入职时间
     function  User_Company_StimeInfo()
    {
         var  form  =  document.all.formReg;
         var  User_Company_StimeV = form.User_Company_Stime.value;
         if (User_Company_StimeV == null   ||  User_Company_StimeV == "" ){
             return   false ;
        }
         var  errInfo = document.getElementById( " User_Company_Stimeerrinfo " );
         var  err = document.getElementById( " User_Company_Stimeerr " );
         if (User_Company_StimeV.length != 7 ){
            err.innerHTML =   " 时间格式不对 " ;
            errInfo.className = " errorFrame " ;
            errInfo.style.display = '' ;

             return   false ;
        } else {
            err.innerHTML =   " 符合要求 " ;
            errInfo.className = " rightFrame " ; 
            errInfo.style.display = '' ;
        }
    }
     // ---------------------------------------离职时间
     function  User_Company_EtimeInfo()
    {
         var  form  =  document.all.formReg;
         var  User_Company_EtimeV = form.User_Company_Etime.value;
         if (User_Company_EtimeV == null   ||  User_Company_EtimeV == "" ){
             return   false ;
        }
         var  errInfo = document.getElementById( " User_Company_Etimeerrinfo " );
         var  err = document.getElementById( " User_Company_Etimeerr " );
         if (User_Company_EtimeV.length != 7 ){
            err.innerHTML =   " 时间格式不对 " ;
            errInfo.className = " errorFrame " ;
            errInfo.style.display = '' ;

             return   false ;
        } else {
            err.innerHTML =   " 符合要求 " ;
            errInfo.className = " rightFrame " ; 
            errInfo.style.display = '' ;
        }
    }
 </ script >
 
yanick
关注
专栏目录
javascript制作的简单注册模块表单验证
12-11
一个注册框  进行表单验证处理 如图 有简单的验证提示功能 代码思路也比较简单 输入框失去焦点时便检测，并进行处理 表单具有 onsubmit = “return check()”行为，处理验证情况 点击提交表单按钮时，进行最终的验证，达到是否通过表单提交的请求。 先是最基本的html+css部分 <style type="text/css"> body{margin:0;padding: 0;} .login{position:relative;margin:100px auto;padding:50px 20px;width: 350px;height: 200px;bo
表单标签实现一个注册页面
ll123c的博客
03-24 620
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <h2>欢迎注册人人网账号</h2> <table> <tr> <td>注册邮箱:</td> &...
网站建设之HTML中用表单和表格嵌套实现会员注册表
m0_46610947的博客
09-28 1322
效果图： 代码： <html> <head> <title>注册页面</title> </head> <body> <form name="register" action="url" method="get"> <table border="2" align="center" cellpadding="5" cellspacing="0"> <caption><h2>填写注册信
案例二：使用表单标签实现注册页面
liupc的学习笔记
03-03 1730
一、需求：实现下面的样式 二、代码 //表单.html <html> <head> <title>注册账号</title> </head...
表单：登录 注册页面
人间清醒
08-11 3441
from :双标签，一般在此标签里面放置其他标签（表单元素==表单控件）: 输入框，密码输入框，按钮，复选框，单选框，文件上传 表单元素基本上都是input标签 结合type属性来使用 表单：提交数据信息 提交的数据其实提交的是表单元素里面的value属性值 form标签： action:信息提交的路径（后台，服务器）现在暂时用后台文件代替（java,php); method:提交...
基于jsp的表单多种控件接收例子
03-18
表单控件包括文本输入框 (`<input type="text">`)、密码输入框 (`<input type="password">`)、单选按钮 (`<input type="radio">`)、复选框 (`<input type="checkbox">`)、下拉列表 (`<select>`) 等。 3. **JSP接收...
Vue.js表单控件实践
10-21
在本实践中，我们将深入探讨Vue.js如何与表单控件交互，包括复选框（checkbox）、单选按钮（radio）、下拉选择（select）以及输入框（input）等。 ### 1. 复选框（Checkbox） 在Vue.js中，`v-model`指令用于双向...
Vue.js 表单控件操作小结
10-18
在处理表单控件时，Vue.js 使用 v-model 指令来创建双向数据绑定，使得视图与数据保持同步。通过 v-model，开发者可以非常容易地实现表单输入和应用程序状态之间的数据流。 首先，v-model 在input和textarea元素中...
javascript表单控件实例讲解
11-24
JavaScript是Web开发中不可或缺的一部分，尤其在处理表单控件时。本文将深入探讨几个JavaScript表单控件的实例，帮助你更好地理解和操作这些元素。 首先，实例一展示了如何遍历表单中的所有控件。在JavaScript中，`...
BootStrap表单控件之文本域textarea
08-30
在Bootstrap中，表单控件是构建用户界面的关键元素，它们使得用户能够输入和提交数据。本文将深入探讨Bootstrap中的一个特定表单控件——文本域（textarea）。 文本域通常用于在表单中收集较长的文本输入，如用户...
实现用户注册功能模块
xzy的博客
04-11 1506
文章目录实现用户注册功能模块a.设置默认首页b.修改/jsp/index.jsp首页上的注册超链接c.在UserServlet中编写registUI方法d.修改register.jsp上的表单信息e.点击注册按钮f.在UserServlet中编写regist方法g.userservice中的操作h.userdao操作测试 实现用户注册功能模块 需求：在register.jsp上填写用户的信息，register.jsp的页面如下图： 点击注册，将用户的信息保存到数据库中。 步骤分析： a.设置默认首页 1.
会员注册表单案例
绿色水杯
08-21 1347
代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <form &
HTML基础笔记之表单实例
bruce_suxin的博客
10-20 345
表单实例 代码运行效果图： 代码如下,图片素材自己下载或截图：     HTML标签的特殊符号 注册***的账号 注册邮箱:   你可以使用账号注册或者手机号注册 创建密码
form表单，账号注册实例
m0_46385600的博客
04-04 1879
**form表单 账号注册** 1，账号注册一般有账号注册，密码注册，确认密码，验证码，提交组成，我们用 form表单里面包裹着 input和 button 组成就行，每个输入框后加一个span储存提示信息 2，先生成随机验证码，先定义一个包含数字和大小写字母的字符串，然后定义一个随机数通过while循环生成随机验证码 3，给每个输入框标签添加鼠标移入事件， 输入框输入内容事件，鼠标移出...
form表单案例---注册表
A_light_sun的博客
10-12 501
注册表案例练习 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title_注册表</title> </head> <body> <form action="" method="po...
表单控件实例(含JavaScript验证
Great_Wow的博客
04-07 267
此表单控件分为含JS验证和不含JS验证(具体详情请参照表单控件实例1(不含JavaScript验证)) ​​<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>From Validation</title> <st...
form组件注册ajax登录auth认证及验证码
diaolouan9546的博客
07-21 907
本项目采用django自带的数据库 项目文件 　　 models.py 1 from django.db import models 2 from django.contrib.auth.models import AbstractUser 3 # Create your models here. 4 5 class Userinfo(AbstractU...
用户模块--用户表设计及注册（实验楼）
蟹老板的博客
12-22 724
使用 DRF 框架 再带的登陆认证进行登陆 userapp.urls.py
JavaScript表单控件实战教程
"JavaScript表单控件实例讲解，包括遍历表单所有控件和通过控件名访问特定控件的示例代码" 在Web开发中，JavaScript是一种至关重要的脚本语言，它允许我们与用户的交互，特别是处理HTML表单数据。在本教程中，我们...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值