jQuery实现表单验证功能

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

如下图

jQuery实现表单验证功能_第1张图片

别忘了引入jQuery框架!!!

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

结构和样式:

欢迎注册原魔
插图
用户名:
邮 箱:
地 址:
密 码:
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;
 }

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

你可能感兴趣的:(jQuery实现表单验证功能)