精华内容
下载资源
问答
  • HTML5 Ajax验证的用户注册表单,无刷新输入判断的HTML5表单特效,界面风格漂亮,功能简洁实用,表单验证方面包括:用户名、邮箱地址判断、密码字符验证、两次密码是否一致判断、是否同意注册协议等,几个常用的判断...
  • ajax的实时验证技术已经很成熟了,在一些规范的网站上,如果有注册验证的模板,必定会涉及到ajax的无刷新验证,这在用户注册的体验中是很棒的,对比一个不能及时和后台无刷新对接的验证模式,要重新返回来刷新,这...
  • 一个Ajax表单检测验证实例,在不刷新网页的情况下对表单中的各个输入项进行检查,并显示出错误提示,在众多ajax表单中,本示例并不是最复杂的,因此对于学习研究类似表单的实现方法很有参考价值。ajax无刷新表单验证...
  • 注册验证AJAX验证表单实例,可以对每一个表单的输入内容进行验证的,并且有提示
  • 表单验证(使用AJAX

    千次阅读 2017-11-29 12:09:29
    1,编写页面 2,查询数据库名字, 3,配置文件 4,页面判断效果展示:在不输入信息或者错误信息时光标移开直接提示 重置将所有提示清楚1,编写页面 (this);... 请注册 <table align="center">

    1,编写页面
    2,查询数据库名字,
    3,配置文件
    4,页面判断

    效果展示:

    在不输入信息或者错误信息时光标移开直接提示
    重置将所有提示清楚

    这里写图片描述

    这里写图片描述

    这里写图片描述

    1,编写页面

    <body>
        <form action="add" onSubmit="return login(this);">
        <h2 align="center">请注册</h2>
        <table align="center">
                    <tr>
                    <td>用户名:</td>
                    <td><input type="text" name="name" id="mess" onblur="checkName()"></td>
                    <td>    <span id="message"></span></td>
                </tr>
                <tr>
                    <td>密 &nbsp;码:</td>
                    <td><input type="password" name="pwd" id="ipwd" onblur="sspwd()"></td>
                    <td> <span id="spwd"></span></td>
                </tr>
                            <tr>
                    <td>确认密码:</td>
                    <td><input type="password" name="pwd2" id="pwd2" onblur="checkPwd()"></td>
                    <td> <span  id="spwd2"></span></td>
                </tr>
                <tr>
                    <td><input type="reset" value="重置" onclick="clean()"></td>
                    <td> <input type="submit" value="注册"  ></td>
                </tr>
    
                </table>
        </form>
    
    
    </body>

    2,查询数据库名字,
    判断数据库是否有这个用户有则不能使用

    package org.xian.action;
    
    import java.util.ArrayList;
    import java.util.HashMap;
    import java.util.List;
    import java.util.Map;
    
    import org.xian.dao.TreeDao;
    import org.xian.dao.UserDao;
    
    import com.opensymphony.xwork2.ActionContext;
    import com.opensymphony.xwork2.ActionSupport;
    
    public class ApiAction extends ActionSupport {
    
        private String name;
        private UserDao dao;
        private Map map;
    
        public void setDao(UserDao dao) {
            this.dao = dao;
        }
    
        public String getName() {
            return name;
        }
    
        public void setName(String name) {
            this.name = name;
        }
        public Map getMap() {
            return map;
        }
    
        public void setMap(Map map) {
            this.map = map;
        }
        public String checkName() {
    
            map=new HashMap();
            map.put("status", "ok");
            List list=dao.checkName(name);
            if (list.size()!=0) {
                map.put("message","用户已存在,请重新输入~~~" );
                map.put("code", "1");
            }else {
                map.put("message","用户名可以使用~~~" );
                map.put("code", "0");
            }
    
            return SUCCESS;
        }
    
    
    }
    

    3,配置文件
    applicationContext.xml

        <!-- -action- -->
    <bean class="org.xian.action.ApiAction" id="apiAction">
            <property name="dao" ref="userDao"></property>
    </property>
        </bean>
        <!-- dao -->
        <bean class="org.xian.dao.UserDao" id="userDao">
            <property name="hibernateTemplate" ref="hibernateTemplate"></property>
        </bean>
    

    struts.xml

    <package name="json" namespace="/api" extends="json-default">
            <action name="checkName" class="apiAction" method="checkName">
                <result name="success" type="json">
                    <param name="root">map</param>
                </result>
            </action>
        </package>

    4,页面判断
    判断名字是否可用

        function checkName() {
    
            var name = $("#mess").val();
            if (name == "") {
                $("#message").removeClass();
                $("#message").addClass("message");
                $("#message").html("用户不能为空!");
                return false;
            }
            $.ajax({
                type : "POST",
                url : "api/checkName",
                data : "name=" + name,
                success : function(msg) {
                    if (msg.code == 1) {
    
                        $("#message").removeClass();
                        $("#message").addClass("message");
                        $("#message").html(msg.message);
    
                    } else {
                        $("#message").removeClass();
                        $("#message").addClass("message2");
                        $("#message").html(msg.message);
                    }
                }
            });
        }

    判断密码不能为空,两次密码需要一样

        function checkPwd() {
            var pwd2 = $("#pwd2").val();
            var pwd = $("#ipwd").val();
            if (pwd2 == "") {
                $("#spwd2").removeClass();
                $("#spwd2").addClass("message");
                $("#spwd2").html("密码不能为空!");
                return false;
            }
    
            if (pwd == pwd2) {
    
                $("#spwd2").removeClass();
                $("#spwd2").addClass("message2");
                $("#spwd2").html("可以使用~~~");
    
            } else {
                $("#spwd2").removeClass();
                $("#spwd2").addClass("message");
                $("#spwd2").html("两次输入密码不一样~~~");
            }
    
        }
        function sspwd() {
            var pwd = $("#ipwd").val();
            if (pwd == "") {
                $("#spwd").removeClass();
                $("#spwd").addClass("message");
                $("#spwd").html("密码不能为空!");
                return false;
            } else {
                $("#spwd").removeClass();
                $("#spwd").addClass("message2");
                $("#spwd").html("可以");
            }
    
        }
    

    提交时提醒

    function login(){
        if(form.name.value == ""||form.name.value==null){
            alert("用户不能为空!");
            return false;
        }
        if(form.pwd.value == ""||form.pwd.value==null){
            alert("密码不能为空!");
            return false;
        }
        if(form.pwd2.value == ""||form.pwd2.value==null){
            alert("请再次输入密码!");
            return false;
        }
    }

    重置时清楚所有提示信息

    function clean() {
        $("#message").removeClass();
        $("#spwd").removeClass();
        $("#spwd").html("");
        $("#spwd2").removeClass();
        $("#spwd2").html("");
        $("#message").html("");
    
    }
    展开全文
  • 一,利用键盘响应,在不刷新本页面的情况下验证表单输入是否合法用户通过onkeydown和onkeyup事件来触发响应事件。使用方法和onclick事件类似。onkeydown表示当键盘上的键被按下时触发,onkeyup和它正好相反,当键盘...
  • 主要介绍了Ajax注册用户时实现表单验证,在网站上注册时,通常需要验证用户名和电子邮件地址的可用性,本文将介绍如何实现表单验证功能
  • 本文实例讲述了PHP实现的用户注册表单验证功能。分享给大家供大家参考,具体如下: 注册界面 register.html 用户注册 <form method=post action=register_verify.php> <input type=text placeholder=...
  • js ajax表单注册验证

    2018-08-26 23:05:37
    无刷新ajax注册表单验证,原生php,thinkphp都可以正常使用
  • 用户注册表单验证(Ajax验证),Ajax写的,注册表单验证
  • 源码包括: 1、django的原生Form表单数据验证。 2、Ajax方式的Form表单数据验证
  • ajax-表单验证

    2016-12-22 20:04:32
    ajax 表单验证 php 需要自建服务器环境(Xampp)
  • 主要介绍了Thinkphp框架 表单自动验证登录注册 ajax自动验证登录注册的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
  • AJAX+JavaScript表单验证

    千次阅读 2019-06-01 15:35:34
    AJAX表单验证 1.前端组件以及JS+AJAX完成表单数据的上传 <html> <head></head> <body> <fieldset> <div class="form-group"> <input class="form-control" ...

    AJAX表单验证

    1.前端组件以及JS+AJAX完成表单数据的上传

    <html>
     <head></head>
     <body>
      <fieldset> 
       <div class="form-group"> 
        <input class="form-control" placeholder="请输入用户名" name="username" id="name" required="required" autofocus="" /> 
       </div> 
       <div class="form-group"> 
        <input class="form-control" placeholder="请输入密码" name="password" id="password" type="password" required="required" value="" /> 
       </div> 
       <input value="登录" type="button" class="btn btn-lg btn-success btn-block" onclick="check()" /> 
      </fieldset>
     </body>
    <script>
    function check(){
        var xhttp = new XMLHttpRequest();
        var username = document.getElementById("name").value;
        var password = document.getElementById("password").value;
        if(username==""||password==""){
            alert("不能为空!")
        }else{
        var url = "CustomerLogin?username="+username+"&password="+password;
        xhttp.open("POST",url,true);
        xhttp.onreadystatechange = function () {
                if (this.readyState == 4 && this.status == 200) {
                    // Typical action to be performed when the document is ready:	
                    var message=xhttp.responseText;
                    if(message=="success"){
                        window.location.href = 'CustomerShop.html';
                    }else{
                        alert(message);
                    }
                }
            };
        xhttp.send();
        }
    }
    </script>
    </html>

    2.后台表单验证逻辑

    public String checkCustomer(Customer cus) {
    		//根据用户名从数据库中查询,并返回List
    		String hql="from Customer where name=?";
    		HibernateService hs=new HibernateService();
    		List<Customer>cusList=hs.CustomerSearch(hql, cus.getName());
    		//如果按照账号查找存在
    		if(cusList.size()==1) {
    			Customer temp=(Customer)cusList.get(0);
    			//匹配密码是否正确
    			if((cus.getPassword()).equals(temp.getPassword())) {
    				return "success";
    			}else {
    				return "fail";
    			}		
    		}else {
    			return "none";
    		}
    	}

    3.后台结果返回部分,也就是Servlet部分

    @WebServlet(name="/CustomerLogin",urlPatterns= {"/WEB-UI/pages/CustomerLogin"})
    public class CustomerLogin extends HttpServlet {
    	private static final long serialVersionUID = 1L;
        public CustomerLogin() {
            super();
            // TODO Auto-generated constructor stub
        }
    	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    		// TODO Auto-generated method stub
    		//response.getWriter().append("Served at: ").append(request.getContextPath());
    		
    		request.setCharacterEncoding("UTF-8");
    		response.setCharacterEncoding("UTF-8");
    		response.setContentType("text/xml;character=utf-8");
    		
    		Customer cus =new Customer();
    		CustomerService service=new CustomerService();
    		//获取前端发来的信息
    		String name=request.getParameter("username");
    		String password=request.getParameter("password");
    		//中文乱码处理
    		byte [] bytes = name .getBytes("ISO-8859-1");
    		name = new String(bytes, "utf-8");
    		byte [] bytes2 = password .getBytes("ISO-8859-1");
    		password = new String(bytes2, "utf-8");
    	
    		//创建含有登录信息的对象
    		cus.setName(name);
    		cus.setPassword(password);
    		System.out.println(cus.getName()+""+cus.getPassword());
    		
    		//调用CustomerService验证用户是否存在
            String message="";
    		String result=service.checkCustomer(cus);
    		if(result.equals("success")) {
    			message="success";
    		}else if(result.equals("fail")) {
    			message="密码错误,请重新输入!";
    		}else {
    			message="用户不存在,请重新登录或前往注册!";
    		}
            //信息返回前端
    		response.getWriter().write(message);
    		
    	}
    	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    		// TODO Auto-generated method stub
    		doGet(request, response);
    	}
    
    }

    4.运行结果

    展开全文
  • 今天小编就为大家分享一篇layui的表单验证支持ajax判断用户名是否重复的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • Ajax注册表单用户名实时验证

    千次阅读 2015-01-20 01:32:28
    很多时候在网站上注册时,我们会发现,注册表单通常需要检查用户名和电子邮件地址的可用性;从而确保用户之间不拥有相同的用户名和电子邮件地址;一些网站喜欢在用户提交填写的用户信息时,做信息可用性的检查,而...


    1.1.1 摘要

    很多时候在网站上注册时,我们会发现,注册表单通常需要检查用户名和电子邮件地址的可用性;从而确保用户之间不拥有相同的用户名和电子邮件地址;一些网站喜欢在用户提交填写的用户信息时,做信息可用性的检查,而一些网站会做实时的用户名和电子邮件地址可用性检查,例如:“用户名”文本框失去焦点时;就用户体验来说,实时的用户信息检查用户体验效果更好,而不是在表单提交后,告诉用户信息不符合系统要求。

    下面截图是新浪微博的注册界面,它采用的是实时的用户信息检查,如:手机号码和用户名等信息。

    ajaxform0

    图1新浪微博注册表单

    本文目录

    1.1.2 正文

    假设,现在要求我们实现一个注册界面并且它采用实时方式检查用户信息是否符合系统的要求。

    其中,注册界面包含:用户名,邮件地址,密码和微博地址等信息;实时检查:当文本框失去焦点时对信息进行实时检查,例如:“用户名”文本框失去焦点时,触发页面发送Ajax请求,到数据库中用户是否可用,接着把查询结果返回到前端页面中。

    对于表单输入检查,我们将使用前一博文《自定义jQuery插件Step by Step》中,自定义表单信息检查插件对输入信息进行检查。

    ajaxform6

    图2注册验证过程

    注册表单设计

    现在,让我们定义注册表单,它包含:用户名,邮件地址,密码和微博地址等信息,由于时间的关系,我们已经把注册表单界面的定义好了,具体实现代码如下:

    <body>
        <div id="Div1">
            <!-- Start Sign Up Form -->
            <form action="#signup-form" id="Form1">
            <h2>
                Sign Up</h2>
            <fieldset>
                <div class="fieldgroup">
                    <label for="name">
                        Name</label>
                    <input class="form_element" type="text" name="name" validation="required nameAvailable" />
                    <span class='availability_status'></span>
                </div>
                <div class="fieldgroup">
                    <label for="email">
                        Email</label>
                    <input class="form_element" type="text" name="email" validation="email" />
                    <span></span>
                </div>
                <div class="fieldgroup">
                    <label for="password">
                        Password</label>
                    <input class="form_element" type="password" name="password" validation="password" />
                    <span></span>
                </div>
                <div class="fieldgroup">
                    <label for="weibo">
                        Weibo</label>
                    <input class="form_element" type="text" name="weibo" validation="url" />
                    <span></span>
                </div>
                <div class="fieldgroup">
                    <input type="submit" class="submit" value="Sign up">
                    <span></span>
                </div>
            </fieldset>
            <div class="fieldgroup">
                <p>
                    Already registered? <a href="http://www.cnblogs.com/rush">Sign in</a>.</p>
            </div>
            </form>
            <!-- End Sign Up Form -->
        </div>
    </body>

    上面,我们实现了注册表单,它包含:用户名,邮件地址,密码和微博地址文本框,当“用户名”失去焦点时,发送Ajax请求实时检查用户名是否可用,并且动态地加载图片表示检查中和相应的检查结果。

    ajaxform1

    图3注册表单

    jQuery Validation插件

    现在,我们需要修改一下前一博文中定义的表单检查控件,需要增加用户名检查和文本框失去焦点事件(blur event)。

    首先,我们在Validation类型中,增加用户名检查方法,由于用户检查是通过发送Ajax请求,然后到数据库中查询是否存在该用户名来确定该用户名是否可用。

    nameAvailable: {
        check: function(value) {
    
            if (value) {
                var dataString = 'username=' + value;
                var result;
    
                //&nbsp;Checking availability...
                // Loads checking image.
                $(".availability_status").html('<img src="loader.gif" align="absmiddle">');
                
                // Sends ajax request to check the name is available or not.
                $.ajax({
                    type: "GET",
                    url: "UserService.ashx",
                    data: dataString,
                    success: function(data) {
                        
                        // When the checking completed, then loaded corresponding css style.
                        $('.availability_status').ajaxComplete(function(event, request, settings) {
                            if (data == false) {
                                $('.availability_status').html('');
                                $('.availability_status').removeClass('tick');
                                $('.availability_status').addClass('error');
                                return true;
                            }
                            else {
                                $('.availability_status').html('');
                                $('.availability_status').removeClass('error');
                                $('.availability_status').addClass('tick');
    
                                return false;
                            }
                        });
    
                    }
                });
    
                // Sends a asyn reqeust, return false temporary.
                return false;
                                        e.preventDefault();
            }
            else {
                $('.availability_status').removeClass('tick');
                $('.availability_status').removeClass('error');
                return false;
            }
        },
        msg: "",
        tip: "Should enter 4-30 characters, support letter, figures and _ or -"
    }

    上面,我们完成了在Validation类型中增加nameAvailable()方法,它通过发送异步Ajax请求来检查用户名是否可用,在检查的过程中,在输入框右边动态地加载图片来表示检查中,当检查结束加载相应的图片表示用户是否可用。

    接下来,我们将添加focus和blur事件,当文本框得到焦点时触发focus事件,提示输入信息的要求,当文本框失去焦点时触发blur事件,发生实时Ajax请求,例如:检查用户名是否可用。

    由于,事件方法应该是Field类型公开的方法,确实我们也不想为每个Field对象都定义自己事件方法,所以我们通过原型链的方式公开事件方法focus()和blur(),具体实现如下:

    // The prototype of Field type.
    Field.prototype = {
    
        // Public method.
        attach: function(event) {
    
            // The object refers to Field object.
            var obj = this;
            // When field lost focus, then invoked the validate method.
            if (event == "blur") {
                obj.field.bind("blur", function() {
                    return obj.validate();
                });
            }
    
            // When field got focus, then invoked the hint method.
            if (event == "focus") {
                obj.field.bind("focus", function() {
                    return obj.hint();
                });
            }
        }
    }

    我们给Field的原型链添加了事件响应事件blur和focus,当失去焦点时触发Field的vlidate()方法,获得焦点时触发Field的hint()方法。

    数据表设计

    前面,我们提到注册表单的用户名可用性检查设计是通过发送Ajax请求,然后到数据库中查询用户名是否存在来确定用户名的可用性。

    接下来,我们添加数据库表jk_user用来存储用户信息,它包括用户名、密码(注意:这里没有考虑隐私信息的加密存储)、显示名称和注册日期等,具体设计如下:

    -- =============================================
    -- Author:        JKhuang
    -- Create date: 7/8/2012
    -- Description:    A table stores the user information.
    -- =============================================
    CREATE TABLE [dbo].[jk_users](
         -- This is the reference to Users table, it is primary key.
        [ID] [bigint] IDENTITY(1,1) NOT NULL,
        [user_login] [varchar](60) NOT NULL,
        [user_pass] [varchar](64) NOT NULL,
        [user_nicename] [varchar](50) NOT NULL,
        [user_email] [varchar](100) NOT NULL,
        [user_url] [varchar](100) NOT NULL,
    
        -- This field get the default from function GETDATE().
        [user_registered] [datetime] NOT NULL CONSTRAINT [DF_jk_users_user_registered]  DEFAULT (getdate()),
        [user_activation_key] [varchar](60) NOT NULL,
        [user_status] [int] NOT NULL CONSTRAINT [DF_jk_users_user_status]  DEFAULT ((0)),
        [display_name] [varchar](250) NOT NULL
    )
    

    ajaxform2

    图4数据表设计

    服务端设计

    前面,我们实现了用户表的设计,由于注册表单通过发送Ajax请求访问服务器端公开的方法,然后通过该公开方法访问数据库。

    接下来,我们定义用户表(jk_user)的数据库访问对象(DAO),它包含方法IsAvailableUser()用来检查用户名是否可用,具体的实现如下:

    /// <summary>
    /// The user dao manager.
    /// </summary>
    public class UserManager
    {
        private const string Query = "SELECT user_login, user_email, user_url FROM jk_users WHERE (user_login = @user_login)";
    
        /// <summary>
        /// Initializes a new instance of the <see cref="UserManager"/> class.
        /// </summary>
        public UserManager()
        {
        }
    
        /// <summary>
        /// Determines whether the user is available or not, with specified username.
        /// </summary>
        /// <param name="userName">Name of the user.</param>
        /// <returns>
        ///   <c>true</c> if is available user; otherwise, <c>false</c>.
        /// </returns>
        public bool IsAvailableUser(string userName)
        {
            using (var con = new SqlConnection(ConfigurationManager.ConnectionStrings["SQLCONN2"].ToString()))
            using (var com = new SqlCommand(Query, con))
            {
                // Pass user_login parameter to sql statement. 
                com.Parameters.Add("@user_login", SqlDbType.VarChar).Value = userName;
                com.Connection.Open();
                return !com.ExecuteReader().HasRows;
            }
        }
    }

    现在,我们完成了数据库访问对象UserManager,它包含方法IsAvailableUser()来检查用户是否可用,如果该用户名已经存在返回false,反之返回true。

    接下来,我们需要实现服务器端类UserService,让客户端通过它来调用UserManager中的IsAvailableUser()方法,首先我们创建一般处理程序(ASHX文件),实现ProcessRequest()方法,具体实现如下:

    /// <summary>
    /// The user availability check service.
    /// </summary>
    public class UserService : IHttpHandler
    {
        public void ProcessRequest(HttpContext context)
        {
            // Response json type.
            context.Response.ContentType = "application/json";
            context.Response.Charset = "utf-8";
    
            var manager = new UserManager();
    
            string userName = context.Request.QueryString["username"];
    
            // Checks the username empty or not.
            if (string.IsNullOrEmpty(userName))
            {
                throw new Exception("Username can't be empty");
            }
    
            // Invokes the IsAvailableUser method.
            var result = manager.IsAvailableUser(userName);
    
            // Serializes data to json format.     
            var json = new DataContractJsonSerializer(result.GetType());
            json.WriteObject(context.Response.OutputStream, result);
        }
    
        // Whether can resuable by other handler or not.
        public bool IsReusable
        {
            get
            {
                return true;
            }
        }
    }

    大家注意到UserService类实现了IHttpHandler接口,该接口包含一个方法ProcessRequest()方法和一个属性IsReusable;ProcessRequest()方法用于处理入站的Http请求,在默认情况下,UserService类把Response内容类型定义为application/json,这样我们就可以把数据通过JSON格式进行传输;IsReusable属性表示相同的处理程序是否可以用于多个请求,这里我们设置为true,那么处理程序可以用于多个请求。

    前端实现

    注册表单在检查用户名时会在输入框的右边动态地加载图片,这里我们使用CSS Sprite技巧实现图片的动态加载。

    当页面加载时,不是加载每个单独图片,而是一次加载整个组合图片。这是一个了不起的改进,因为我们只需发送一个HTTP请求获取组合图片就OK了,它大大减少了HTTP请求的次数,减轻服务器压力,同时缩短了悬停加载图片所需要的时间延迟,使效果更流畅,不会停顿。

    这里,我们使用可以一个在线的工具SpritePad设计组合图片和生成相应的CSS代码。

    ajaxform3

    图5组合图片

    上面,我们已经准备好组合图片了,接下来我们添加CSS代码动态加载“正确”和“出错”图片,具体实现如下:

    /*CSS Sprite*/
    /*Loads tick picture*/
    .tick
    {
        width: 17px;
        height: 17px;
        margin: 6px 0 0;
        float: right;
        background: url(../images/tipicon.png);
        background-position: 0px -32px;
        display: block;
        /*text-decoration: none;
        vertical-align:middle;*/
    }
    
    /*Loads error picture*/
    span.error
    {
        width: 17px;
        height: 17px;
        margin: 6px 0 0;
        float: right;
        background: url(../images/tipicon.png);
        background-position: 0px -15px;
        display: block;
        /*text-decoration: none;
        vertical-align:middle;*/
    }

    接着,我们在nameAvailable()方法中的Ajax方法添加文件“UserService.ashx”请求,并传递用户名给服务器;在数据库中查询用户名是否已经存在,存在返回“false”,否则返回“true”。

    // Sends ajax request to check the name is available or not.
    $.ajax({
        type: "GET",
        url: "UserService.ashx",
        data: dataString,
        success: function(data) {
    
            // When the checking completed, then loaded corresponding css style.
            $('.availability_status').ajaxComplete(function(event, request, settings) {
                if (data == false) {
                    $('.availability_status').html('');
                    $('.availability_status').removeClass('tick');
                    $('.availability_status').addClass('error');
                    return true;
                }
                else {
                    $('.availability_status').html('');
                    $('.availability_status').removeClass('error');
                    $('.availability_status').addClass('tick');
                    return false;
                }
            });
    
        }
    });

    最后,我们在注册表单中添加调用自定义验证控件的jQuery代码,具体实现如下:

    <script type="text/javascript">
    
        // Sets display image size.
        pic = new Image(16, 16);
        pic.src = "loader.gif";
    
        $(function() { // jQuery DOM ready function.
    
            // Get the form object.
            var signUpForm = $("#signup-form");
    
            // Invokes the validation method.
            signUpForm.validation();
    
        });
    </script>
    image图6用户注册界面

    1.1.3 总结

    本文主要介绍了Ajax注册表单的设计,通过发送Ajax请求方式实时地检查用户名的可用性,并且使用了自定义的表单验证插件检查输入信息的正确性。

    注册验证过程的前端和后端设计,前端使用了表单验证插件,CSS Sprites技巧和Ajax;后端通过提供一般处理程序让客户端调用用户名可用性的检查方法IsAvailableUser()。

    参考

    分类:  [01] .NET[04] ASP.NET
    标签:  JavascriptAjaxAsp.net

    1.1.1 摘要

    很多时候在网站上注册时,我们会发现,注册表单通常需要检查用户名和电子邮件地址的可用性;从而确保用户之间不拥有相同的用户名和电子邮件地址;一些网站喜欢在用户提交填写的用户信息时,做信息可用性的检查,而一些网站会做实时的用户名和电子邮件地址可用性检查,例如:“用户名”文本框失去焦点时;就用户体验来说,实时的用户信息检查用户体验效果更好,而不是在表单提交后,告诉用户信息不符合系统要求。

    下面截图是新浪微博的注册界面,它采用的是实时的用户信息检查,如:手机号码和用户名等信息。

    ajaxform0

    图1新浪微博注册表单

    本文目录

    1.1.2 正文

    假设,现在要求我们实现一个注册界面并且它采用实时方式检查用户信息是否符合系统的要求。

    其中,注册界面包含:用户名,邮件地址,密码和微博地址等信息;实时检查:当文本框失去焦点时对信息进行实时检查,例如:“用户名”文本框失去焦点时,触发页面发送Ajax请求,到数据库中用户是否可用,接着把查询结果返回到前端页面中。

    对于表单输入检查,我们将使用前一博文《自定义jQuery插件Step by Step》中,自定义表单信息检查插件对输入信息进行检查。

    ajaxform6

    图2注册验证过程

    注册表单设计

    现在,让我们定义注册表单,它包含:用户名,邮件地址,密码和微博地址等信息,由于时间的关系,我们已经把注册表单界面的定义好了,具体实现代码如下:

    <body>
        <div id="Div1">
            <!-- Start Sign Up Form -->
            <form action="#signup-form" id="Form1">
            <h2>
                Sign Up</h2>
            <fieldset>
                <div class="fieldgroup">
                    <label for="name">
                        Name</label>
                    <input class="form_element" type="text" name="name" validation="required nameAvailable" />
                    <span class='availability_status'></span>
                </div>
                <div class="fieldgroup">
                    <label for="email">
                        Email</label>
                    <input class="form_element" type="text" name="email" validation="email" />
                    <span></span>
                </div>
                <div class="fieldgroup">
                    <label for="password">
                        Password</label>
                    <input class="form_element" type="password" name="password" validation="password" />
                    <span></span>
                </div>
                <div class="fieldgroup">
                    <label for="weibo">
                        Weibo</label>
                    <input class="form_element" type="text" name="weibo" validation="url" />
                    <span></span>
                </div>
                <div class="fieldgroup">
                    <input type="submit" class="submit" value="Sign up">
                    <span></span>
                </div>
            </fieldset>
            <div class="fieldgroup">
                <p>
                    Already registered? <a href="http://www.cnblogs.com/rush">Sign in</a>.</p>
            </div>
            </form>
            <!-- End Sign Up Form -->
        </div>
    </body>

    上面,我们实现了注册表单,它包含:用户名,邮件地址,密码和微博地址文本框,当“用户名”失去焦点时,发送Ajax请求实时检查用户名是否可用,并且动态地加载图片表示检查中和相应的检查结果。

    ajaxform1

    图3注册表单

    jQuery Validation插件

    现在,我们需要修改一下前一博文中定义的表单检查控件,需要增加用户名检查和文本框失去焦点事件(blur event)。

    首先,我们在Validation类型中,增加用户名检查方法,由于用户检查是通过发送Ajax请求,然后到数据库中查询是否存在该用户名来确定该用户名是否可用。

    nameAvailable: {
        check: function(value) {
    
            if (value) {
                var dataString = 'username=' + value;
                var result;
    
                //&nbsp;Checking availability...
                // Loads checking image.
                $(".availability_status").html('<img src="loader.gif" align="absmiddle">');
                
                // Sends ajax request to check the name is available or not.
                $.ajax({
                    type: "GET",
                    url: "UserService.ashx",
                    data: dataString,
                    success: function(data) {
                        
                        // When the checking completed, then loaded corresponding css style.
                        $('.availability_status').ajaxComplete(function(event, request, settings) {
                            if (data == false) {
                                $('.availability_status').html('');
                                $('.availability_status').removeClass('tick');
                                $('.availability_status').addClass('error');
                                return true;
                            }
                            else {
                                $('.availability_status').html('');
                                $('.availability_status').removeClass('error');
                                $('.availability_status').addClass('tick');
    
                                return false;
                            }
                        });
    
                    }
                });
    
                // Sends a asyn reqeust, return false temporary.
                return false;
                                        e.preventDefault();
            }
            else {
                $('.availability_status').removeClass('tick');
                $('.availability_status').removeClass('error');
                return false;
            }
        },
        msg: "",
        tip: "Should enter 4-30 characters, support letter, figures and _ or -"
    }

    上面,我们完成了在Validation类型中增加nameAvailable()方法,它通过发送异步Ajax请求来检查用户名是否可用,在检查的过程中,在输入框右边动态地加载图片来表示检查中,当检查结束加载相应的图片表示用户是否可用。

    接下来,我们将添加focus和blur事件,当文本框得到焦点时触发focus事件,提示输入信息的要求,当文本框失去焦点时触发blur事件,发生实时Ajax请求,例如:检查用户名是否可用。

    由于,事件方法应该是Field类型公开的方法,确实我们也不想为每个Field对象都定义自己事件方法,所以我们通过原型链的方式公开事件方法focus()和blur(),具体实现如下:

    // The prototype of Field type.
    Field.prototype = {
    
        // Public method.
        attach: function(event) {
    
            // The object refers to Field object.
            var obj = this;
            // When field lost focus, then invoked the validate method.
            if (event == "blur") {
                obj.field.bind("blur", function() {
                    return obj.validate();
                });
            }
    
            // When field got focus, then invoked the hint method.
            if (event == "focus") {
                obj.field.bind("focus", function() {
                    return obj.hint();
                });
            }
        }
    }

    我们给Field的原型链添加了事件响应事件blur和focus,当失去焦点时触发Field的vlidate()方法,获得焦点时触发Field的hint()方法。

    数据表设计

    前面,我们提到注册表单的用户名可用性检查设计是通过发送Ajax请求,然后到数据库中查询用户名是否存在来确定用户名的可用性。

    接下来,我们添加数据库表jk_user用来存储用户信息,它包括用户名、密码(注意:这里没有考虑隐私信息的加密存储)、显示名称和注册日期等,具体设计如下:

    -- =============================================
    -- Author:        JKhuang
    -- Create date: 7/8/2012
    -- Description:    A table stores the user information.
    -- =============================================
    CREATE TABLE [dbo].[jk_users](
         -- This is the reference to Users table, it is primary key.
        [ID] [bigint] IDENTITY(1,1) NOT NULL,
        [user_login] [varchar](60) NOT NULL,
        [user_pass] [varchar](64) NOT NULL,
        [user_nicename] [varchar](50) NOT NULL,
        [user_email] [varchar](100) NOT NULL,
        [user_url] [varchar](100) NOT NULL,
    
        -- This field get the default from function GETDATE().
        [user_registered] [datetime] NOT NULL CONSTRAINT [DF_jk_users_user_registered]  DEFAULT (getdate()),
        [user_activation_key] [varchar](60) NOT NULL,
        [user_status] [int] NOT NULL CONSTRAINT [DF_jk_users_user_status]  DEFAULT ((0)),
        [display_name] [varchar](250) NOT NULL
    )
    

    ajaxform2

    图4数据表设计

    服务端设计

    前面,我们实现了用户表的设计,由于注册表单通过发送Ajax请求访问服务器端公开的方法,然后通过该公开方法访问数据库。

    接下来,我们定义用户表(jk_user)的数据库访问对象(DAO),它包含方法IsAvailableUser()用来检查用户名是否可用,具体的实现如下:

    /// <summary>
    /// The user dao manager.
    /// </summary>
    public class UserManager
    {
        private const string Query = "SELECT user_login, user_email, user_url FROM jk_users WHERE (user_login = @user_login)";
    
        /// <summary>
        /// Initializes a new instance of the <see cref="UserManager"/> class.
        /// </summary>
        public UserManager()
        {
        }
    
        /// <summary>
        /// Determines whether the user is available or not, with specified username.
        /// </summary>
        /// <param name="userName">Name of the user.</param>
        /// <returns>
        ///   <c>true</c> if is available user; otherwise, <c>false</c>.
        /// </returns>
        public bool IsAvailableUser(string userName)
        {
            using (var con = new SqlConnection(ConfigurationManager.ConnectionStrings["SQLCONN2"].ToString()))
            using (var com = new SqlCommand(Query, con))
            {
                // Pass user_login parameter to sql statement. 
                com.Parameters.Add("@user_login", SqlDbType.VarChar).Value = userName;
                com.Connection.Open();
                return !com.ExecuteReader().HasRows;
            }
        }
    }

    现在,我们完成了数据库访问对象UserManager,它包含方法IsAvailableUser()来检查用户是否可用,如果该用户名已经存在返回false,反之返回true。

    接下来,我们需要实现服务器端类UserService,让客户端通过它来调用UserManager中的IsAvailableUser()方法,首先我们创建一般处理程序(ASHX文件),实现ProcessRequest()方法,具体实现如下:

    /// <summary>
    /// The user availability check service.
    /// </summary>
    public class UserService : IHttpHandler
    {
        public void ProcessRequest(HttpContext context)
        {
            // Response json type.
            context.Response.ContentType = "application/json";
            context.Response.Charset = "utf-8";
    
            var manager = new UserManager();
    
            string userName = context.Request.QueryString["username"];
    
            // Checks the username empty or not.
            if (string.IsNullOrEmpty(userName))
            {
                throw new Exception("Username can't be empty");
            }
    
            // Invokes the IsAvailableUser method.
            var result = manager.IsAvailableUser(userName);
    
            // Serializes data to json format.     
            var json = new DataContractJsonSerializer(result.GetType());
            json.WriteObject(context.Response.OutputStream, result);
        }
    
        // Whether can resuable by other handler or not.
        public bool IsReusable
        {
            get
            {
                return true;
            }
        }
    }

    大家注意到UserService类实现了IHttpHandler接口,该接口包含一个方法ProcessRequest()方法和一个属性IsReusable;ProcessRequest()方法用于处理入站的Http请求,在默认情况下,UserService类把Response内容类型定义为application/json,这样我们就可以把数据通过JSON格式进行传输;IsReusable属性表示相同的处理程序是否可以用于多个请求,这里我们设置为true,那么处理程序可以用于多个请求。

    前端实现

    注册表单在检查用户名时会在输入框的右边动态地加载图片,这里我们使用CSS Sprite技巧实现图片的动态加载。

    当页面加载时,不是加载每个单独图片,而是一次加载整个组合图片。这是一个了不起的改进,因为我们只需发送一个HTTP请求获取组合图片就OK了,它大大减少了HTTP请求的次数,减轻服务器压力,同时缩短了悬停加载图片所需要的时间延迟,使效果更流畅,不会停顿。

    这里,我们使用可以一个在线的工具SpritePad设计组合图片和生成相应的CSS代码。

    ajaxform3

    图5组合图片

    上面,我们已经准备好组合图片了,接下来我们添加CSS代码动态加载“正确”和“出错”图片,具体实现如下:

    /*CSS Sprite*/
    /*Loads tick picture*/
    .tick
    {
        width: 17px;
        height: 17px;
        margin: 6px 0 0;
        float: right;
        background: url(../images/tipicon.png);
        background-position: 0px -32px;
        display: block;
        /*text-decoration: none;
        vertical-align:middle;*/
    }
    
    /*Loads error picture*/
    span.error
    {
        width: 17px;
        height: 17px;
        margin: 6px 0 0;
        float: right;
        background: url(../images/tipicon.png);
        background-position: 0px -15px;
        display: block;
        /*text-decoration: none;
        vertical-align:middle;*/
    }

    接着,我们在nameAvailable()方法中的Ajax方法添加文件“UserService.ashx”请求,并传递用户名给服务器;在数据库中查询用户名是否已经存在,存在返回“false”,否则返回“true”。

    // Sends ajax request to check the name is available or not.
    $.ajax({
        type: "GET",
        url: "UserService.ashx",
        data: dataString,
        success: function(data) {
    
            // When the checking completed, then loaded corresponding css style.
            $('.availability_status').ajaxComplete(function(event, request, settings) {
                if (data == false) {
                    $('.availability_status').html('');
                    $('.availability_status').removeClass('tick');
                    $('.availability_status').addClass('error');
                    return true;
                }
                else {
                    $('.availability_status').html('');
                    $('.availability_status').removeClass('error');
                    $('.availability_status').addClass('tick');
                    return false;
                }
            });
    
        }
    });

    最后,我们在注册表单中添加调用自定义验证控件的jQuery代码,具体实现如下:

    <script type="text/javascript">
    
        // Sets display image size.
        pic = new Image(16, 16);
        pic.src = "loader.gif";
    
        $(function() { // jQuery DOM ready function.
    
            // Get the form object.
            var signUpForm = $("#signup-form");
    
            // Invokes the validation method.
            signUpForm.validation();
    
        });
    </script>
    image图6用户注册界面

    1.1.3 总结

    本文主要介绍了Ajax注册表单的设计,通过发送Ajax请求方式实时地检查用户名的可用性,并且使用了自定义的表单验证插件检查输入信息的正确性。

    注册验证过程的前端和后端设计,前端使用了表单验证插件,CSS Sprites技巧和Ajax;后端通过提供一般处理程序让客户端调用用户名可用性的检查方法IsAvailableUser()。

    参考

    分类:  [01] .NET[04] ASP.NET
    标签:  JavascriptAjaxAsp.net
    展开全文
  • ajax表单验证

    2013-11-16 21:17:28
    ajax表单验证
  • 主要介绍了yii2 modal弹窗之ActiveForm ajax表单验证的相关资料,非常不错具有参考借鉴价值,需要的朋友可以参考下
  • Ajax表单验证插件

    2014-12-15 09:00:11
    Ajax表单验证插件,界面漂亮简洁,调用简单
  • tp数据验证有两种方式,一种是静态方式,一种是动态方式,下面小编给大家带来了ThinkPhp 框架表单验证ajax验证问题,感兴趣的朋友一起看看吧
  • 兼容: opera 9.6 + chrome 2.0 + FF 3 + IE 6 效果:一边输入一边实现验证 环境:ruby 1.8.6 + rails 2.1.0 + windows 核心代码: html: 浏览器禁用javascript时显示提示信息: 代码如下:<noscript> 您的浏览器不支持...
  • 今天给大家介绍的是当下很流行的框架layui中的一个小案例、就是form表单监控提交并且使用ajax异步提交验证数据。在layui中我们想使用哪个模块就要layui.use(‘form’,function{});这种形式要引用form内置模板,下面...
  • Ajax表单验证

    2015-11-06 16:29:38
    Ajax表单验证,亲测能用的,运用的是struts框架。
  • 内容索引:脚本资源,jQuery,表单验证 一个基于JavaScript 的Ajax动态表单验证封装类,附带有示例文件,从此扔掉烦人的Alert。示例中,当输入不符标准的信息后,表单不能提交,并渐显出提示信息,很漂亮的提示样式,...
  • validationEngine给我们为前端的表单验证减少了很大的工作量.大部分情况我们使用validationEngine验证表单的形式有几种方式: 1 使用正常的表单提交.这种情况validationEngine验证不通过是不会提交表单的. 2 使用ajax...
  • serialize() 方法通过序列化表单值,创建 URL 编码文本字符串。代替了一个一个传参的方式 以往写的ajax传参方式 $.ajax({ url : "${ctx}/SJStandardDamPartition/insertOrUpdateDamPartition", type : "post", ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 51,062
精华内容 20,424
关键字:

ajax注册表单验证