当前位置: 代码迷 >> Web前端 >> 施用Jquery验证注册表单数据
  详细解决方案

施用Jquery验证注册表单数据

热度:582   发布时间:2012-09-15 19:09:28.0
使用Jquery验证注册表单数据

/**

?* @author jilongliang

?* 注册的验证.

?*/

$(function(){

??? var $email =/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/ // Email

??? var $userName =/^[\u4e00-\u9fa5_a-zA-Z0-9]+$/ // 匹配中文,英文字母和数字及

??? var $qq =/[1-9][0-9]{4,}/?? // QQ??? ^[1-9]{1}[\d]{4,9}$

??? var $url =/^https?:\/\/(\w+\.)?[\w\-\.]+(\.\w+)+$/ // url

??? var $mycode =/^[0-9]*$/?? // code

??? var img_rigth ="<img src='images/check_right.gif'/>";

??? var img_error ="<img src='images/check_error.gif'/>";

?

??? /**

??? ?* 取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合.

??? ?* 这个函数只返回后面那个紧邻的同辈元素,而不是后面所有的同辈元素(可以使用nextAll) 可以用一个可选的表达式进行筛选.

??? ?*/

??? $("input[name='username']").blur(function() {

?????? ?if ($(this).val() == "") {

?????????? $(this).nextAll("span").html(img_error + "用户名不能为空!");

?????????? return;

?????????? // $('#email').focus;

?????????? // return false;

?????? } else if ($userName.test($(this).val()) == false) {

?????????? $(this).nextAll("span").html(img_error + "格式不正确!");

?????????? return;

?????? } else {

?????????? $(this).next("span").html(img_rigth);

?????? }

??? });

?

??? /** 判断密码 */

??? $("input[name='password']").blur(function() {

?????? if ($(this).val() == "") {

?????????? $(this).nextAll("span").html(img_error + "密码不能为空!");

?????????? return;

?????? } else {

?????????? $(this).next("span").html(img_rigth);

?????? }

??? });

?

??? /** 判断密码是否一致 */

??? $("input[name='comfirm_password']").blur(function() {

?????? var password = $("input[name='password']").val();

?????? if (password != $(this).val()) {

?????????? $(this).next("span").html(img_error+ "确认密码与密码一致.");

?????????? return;

?????? } else {

?????????? $(this).next("span").html(img_rigth);

?????? }

??? });

?

??? /** 密码提示验证 */

??? $("input[name='pwd_prompt']").blur(function() {

?

?????? if ($(this).val()=="") {

?????????? $(this).next("span").html(img_error+"不能为空必须填写项.");

?????????? return;

?????? } else if ($(this).val().length < 2) {

?????????? $(this).next("span").html(img_error + "长度不能小于两个字节.");

?????????? return;

?????? } else {

?????????? $(this).next("span").html(img_rigth);

?????? }

??? });

?

??? /** 密码回答验证 */

??? $("input[name='pwd_answer']").blur(function() {

?????? if ($(this).val()=="") {

?????????? $(this).next("span").html(img_error + "不能为空必须填写项.");

?????????? return;

?????? } else if ($(this).val().length < 2) {

?????????? $(this).next("span").html(img_error + "长度不能小于两个字节.");

?????????? return;

?????? } else {

?????????? $(this).next("span").html(img_rigth);

?????? }

??? });

?

??? /** Email验证 */

??? $("input[name='email']").blur(function() {

?????? if ($(this).val()=="") {

?????????? $(this).next("span").html(img_error + "Email不能为空.");

?????????? return;

?????? } else if ($email.test($(this).val()) == false) {

?????????? $(this).next("span").html(img_error + "您的Email格式不正确!");

?????????? return;

?????? } else {

?????????? $(this).next("span").html(img_rigth);

?????? }

??? });

??? /** 验证QQ */

??? $("input[name='qq']").blur(function() {

?????? if ($(this).val()=="") {

?????????? return null;

?????? } else if ($qq.test($(this).val()) == false) {

?????????? $(this).next("span").html(img_error + "您的QQ格式不正确!");

?????????? return;

?????? } else {

?????????? $(this).next("span").html(img_rigth);

?????? }

??? });

??? /** 网址验证 */

??? $("input[name='url']").blur(function() {

?????? if ($(this).val()=="") {

?????????? return null;

?????? } else if ($url.test($(this).val()) == false) {

?????????? $(this).next("span").html(img_error + "您的URL格式不正确!");

?????????? return;

?????? } else {

?????????? $(this).next("span").html(img_rigth);

?????? }

??? });

??? /** 验证码 */

??? $("input[name='code']").blur(function() {

?????? if ($(this).val()=="") {

?????????? $("#img_code").html(img_error + "验证码不能为空!");

?????????? return;

?????? } else if ($mycode.test($(this).val()) == false) {

?????????? $("#img_code").html(img_error + "验证码格式不正确!");

?????????? return ;

?????? }else{

?????????? $("#img_code").html(img_rigth);

?????? }

??? });

??? /**

??? ?* 提交

??? ?*/

??? $("#reg_submit").click(function(){

//???? if ($("#reg_username").val() == "") {

//???????? $("#sp_name").nextAll("span").html(img_error + "用户名不能为空!");

//???????? return;

//???? }else if($userName.test($("#reg_username").val()) == false) {

//???????? $("#sp_name").nextAll("span").html(img_error + "格式不正确!");

//???????? return;

//???? }else if($("#reg_code").val()==""){

//???????? $("#img_code").nextAll("span").html(img_error + "验证码不能为空!");

//???????? return;

//???? }else if($mycode.test($("#reg_code").val()) == false){

//???????? $("#img_code").nextAll("span").html(img_error + "格式不正确!");

//???????? return;

//???? } else {

//???????? $("#img_code,#sp_name").html(img_rigth);

//???? }

?????????? var $username = $("#reg_username").val();// 用户名

?????????? var $password = $("#reg_password").val();// 密码

?????????? var $comfirm_password = $("#reg_comfirm_password").val();// 确认密码

?????????? var $pwd_prompt = $("#reg_pwd_prompt").val();// 密码提示

?????????? var $pwd_answer = $("#reg_pwd_answer").val();// 密码问题

?????????? // var $sex=$("#sex").val();//性别

?????????? var $face = $("#reg_face").val();// 用户 头像

?????? ??? var $email = $("#reg_email").val();// Email

?????????? var $qq = $("#reg_qq").val();// qq

?????????? var $url = $("#reg_url").val();// 主页URL

?????????? var $code = $("#reg_code").val();// 验证码

?????????? $.post('crmeasy/register.action',{

?????????? ??? type:'post',

????????????? dataType:'json',

????????????? username : $username,

????????????? password : $password,

????????????? comfirm_password : $comfirm_password,

????????????? pwd_prompt : $pwd_prompt,

????????????? pwd_answer : $pwd_answer,

????????????? face : $face,

????????????? email : $email,

????????????? qq : $qq,

????????????? myurl : $url,

????????????? code : $code

?????????? }, function(data) {

????????????? //data.flag是访问struts2提供的setget.

????????????? if(data.flag==true){

????????????????? location.href="index.jsp";

????????????????? //event.preventDefault()//防止默认行为(表单提交)

????????????? }else{

????????????????? ?alert("注册失败啦!");

????????????? }

?????????? });

??? });

?

});

?

/** 验证码的函数是Javascript,是在Jquery function之外 */

function ValidCode(obj) {

??? var timenow = new Date().getTime();

??? obj.src = "crmeasy/rand.action?d=" + timenow;

}

?

  相关解决方案