jQuery实现表单验证功能

jQuery表单验证实例 / 包含用户名、密码、住址、邮箱验证

如下图

别忘了引入jQuery框架!!!

话不多说直接先上jQuery部分代码:

<script type="text/javascript">
 $(document).ready(function(){
  var tip1 = "<span class='span1'>用户名不能为空!</span>";//声明发生错误时在输入框后面添加的span
  var tip2 = "<span class='span2'>邮箱格式错误或不能为空!</span>";
  var tip3 = "<span class='span3'>地址不能为空!</span>";
  var tip4 = "<span class='span4'>密码长度不能小于五位且最多为十位 !</span>";
  var condition = /^([\.a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;//声明判定邮箱格式的条件
  $(".id").blur(function(){
   if(!$(".id").val()){//判定用户名非空
    $(".span1").remove();
    $(".id").after(tip1);
   }
   else{
    $(".span1").remove();
   }
  });
  $(".email").blur(function(){

   if(!condition.test($(".email").val())){//判定邮箱格式
    $(".span2").remove();
    $(".email").after(tip2);
   }
   else{
    $(".span2").remove();
   }

  });
  $(".adress").blur(function(){
   if(!$(".adress").val()){//判定地址非空
    $(".span3").remove();
    $(".adress").after(tip3);
   }
   else{
    $(".span3").remove();
   }
  });
  $(".pwd").blur(function(){

   if($(".pwd").val().length < 5||$(".pwd").val().length >10){//判定密码长度不能小于5位且不能大于10位
    $(".span4").remove();
    $(".pwd").after(tip4);
   }
   else{
    $(".span4").remove();
   }
  });
  $(".button").click(function(){//符合所有条件则弹出弹窗表单验证通过,如果不符合则弹出弹窗提醒用户更改
   if(!$(".id").val()||!condition.test($(".email").val())||!$(".adress").val()||$(".pwd").val().length < 5||$(".pwd").val().length >10){
    alert("注册信息有误,请更改个人信息");
   }
   else{
    alert("注册成功");
   }
  })
 })
</script>

结构和样式:

<div class="main_box">
  <div class="title">
   欢迎注册原魔
  </div>
  <div class="box">
  <img alt="插图"  src="./img/可莉派萌.png" class="img">
   <form>
    用户名:<input class="id" type="text" ><br>
    邮&emsp;箱:<input class="email" type="text"><br>
    地&emsp;址:<input class="adress" type="text"><br>
    密&emsp;码:<input class="pwd" type="password"><br>
    <button type = "button" class="button">注&emsp;&emsp;&emsp;册</button>
   </form>
  </div>
 </div>
span{
  color:white;
 }
 body{
  font-family: sans-serif;
 }
 .main_box{
  width: 100%;
  height: 910px;
  background-color: red;
  background-image: linear-gradient(#e66465, #000000);
 }
 .title{
  font-size: 5em;
  color: white;
  width:100%;
  height: 100px;
  text-align: center;
 }
 .box{
  width: 1050px;
  height: 310px;
  margin: 150px auto 50px auto;
  padding-left: 360px;
 }
 input{
  height: 40px;
  width: 200px;
  border-radius: 20px;
  border: solid 1px #B5B5B5;
  margin: 10px;
  font-size: 1.2em;
 }
 form{
  color:white;
  font-size:1.2em;
  float: left;
  margin-left: 50px;
 }

 .button{
  width: 280px;
  height: 40px;
  background-color: #9781FD;
  border-radius: 25px;
  color:white;
  font-size: 1.3em;
  font-weight: 700;
  margin-top: 10px;

 }
 .img{
  width:310px;
  height: 310px;
  float: left;
 }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 使用 jQuery 实现表单验证功能

    5.1.5 表单验证 表单作为 HTML 最重要的一个组成部分,几乎在每个网页上都有体现,例如用户提交信息.用户反馈信息和用户查询信息等,因此它是网站管理者与浏览者之间沟通的桥梁.在表单中,表单验证的作用也是非常重要的,它能使表单更加灵活.美观和丰富. 以一个简单的用户注册为例.首先新建一个表单, HTML 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" c

  • Jquery插件easyUi表单验证提交(示例代码)

    复制代码 代码如下: <form id="myForm" method="post">  <table align="center" style="width:400px;height:auto;margin-top: 20px">           <tr>                                           <td align="righ

  • jQuery实现用户注册的表单验证示例

    复制代码 代码如下: <html> <head> <meta charset="utf-8"/> <script type="text/javascript" src="../script/jquery-1.4.2.min.js"></script> <script> $(function(){ $(":input.required").each(func

  • jquery实现表单验证并阻止非法提交

    代码检测textarea内填写的长度,未填写时提示需要重新填写,少于15字符时提示需要长于15字符,成功时显示所填写建议. <script type="text/javascript"> //jQuery代码 function confirm() { if($("#advice").val().length == 0) { alert("We can't see your advice. Maybe you should fill the fo

  • 基于Jquery实现表单验证

    有时在我们注册账户.登陆系统时,当所有验证通过方可提交 这就需要Jquery来实现表单验证,今天分享给小伙伴们一段基于Jquery实现表单验证的代码. <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>Reg</title> <style> .state1{ color

  • jquery validate.js表单验证的基本用法入门

    这里转载一篇前辈写的文章,在我自己的理解上修改了一下,仅作记录. 先贴一个国内某大公司的代码: 复制代码 代码如下: <script type="text/javascript"> function lang(key) { mylang = { 'ls_input_myb': '请输入您的账户', 'ls_myb_email': '漫游币账户为邮箱地址', 'ls_login_password': '请输入您的登录密码', 'ls_password_length': '密码

  • jQuery 表单验证插件formValidation实现个性化错误提示

    其效果图如下:使用说明 需要使用jQuery库文件和formValidation库文件[下载实例代码] http://jquery.com/ 同时需要自定义显示提示错误信息的CSS样式 使用实例 一,包含文件部分 复制代码 代码如下: <script src="jquery.js" type="text/javascript"></script> <script src="jquery.validationEngine.js&

  • Jquery练习之表单验证实现代码

    Jquery练习表单验证 复制代码 代码如下: <body> <form action="" method="post" id ="myform"> <table> <tr> <td>姓名:</td> <td><input type ="text" id = "name" name ="name"&

  • jquery表单验证使用插件formValidator

    1.首先在项目中添加必备js与css  2.代码中添加引用(必备引用) 复制代码 代码如下: <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> <!--jquery必须库--> <script src="formValidator1/formValidator-4.0.1.min.js" type=&quo

  • 基于Bootstrap+jQuery.validate实现Form表单验证

    基于Bootstrap jQuery.validate Form表单验证实践项目结构 : github 上源码地址:https://github.com/starzou/front-end-example 1.form 表单代码[html] 复制代码 代码如下: <!DOCTYPE html>  <html>      <head>          <title>Bootstrap Form Template</title>         

随机推荐