jquery 通过submit()方法 提交表单示例

时间:2024-04-15 10:16:52

jquery 通过submit()方法 提交表单示例:


本示例:以用户注册作为例子。使用jquery中的submit()方法实现表单提交。

注:本示例仅提供了对表单的验证,本例只用选用了三个字段作为测试。

  用户点击提交按钮时,触发点击事件,会执行所有表单框的验证,如通过验证,则执行submit()方法,对表单内容进行提交。 

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>用户注册</title>

<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>

<script>

$(function(){   

   $(\'#register\').click(function(){

     var name=$(\'#name\').val();

var pass=$(\'#pass\').val();

var phone=$(\'#phone\').val();

     if(name==\'\'){

   alert(\'用户名不能为空\');

return false;

  }else if(pass==\'\'){

     alert(\'密码不能为空。\');

 return false;

  }else if(phone==\'\'){

    alert(\'手机号码不能为空\');

    return false;

  }else if(phone!=\'\'){

     var reg=/^1[3458]\d{9}$/;

 if(!reg.test(phone)){

  alert(\'手机号码格式不正确\');

  return false;

}

  }else{

$(\'form\').submit();

  }

   })    

})

</script>

</head>

<body>

<form name="myform" method="post" action="__URL__/register">

<input type="text" name="name" value="" id="name"/>

<input type="password" name="pass" value="" id="pass" />

<input type="text" name="phone" value="" id="phone" />

<input type="submit" name="" value="用户注册" id="register" />

</form>

</body>

</html>

 上面的示例:仅对表单框内容进行了简单的验证,

 这个验证,可以写得更详细一点。可对用户注册时,用户名是否存在进行验证。

 还可以对用户名表单框失去焦点时添加事件,对用户名更详细一步的进行验证。 如:必须以字母开头。长度必须大于多少位。。。在验证的同时,也可以提示信息的文字内容进行改变,如验证出错时,文字以红色显示,验证通过时,让文字以绿色显示。

  关于用户名检测与验证,本例仅给大家提供一下思路。