-
Javascript知识【validation插件重写表单注册校验】
目录
案例：重写表单注册校验
用validation插件进行表单校验
要求：
1，用户名，密码，确认密码，Email，出生日期必填
2，用户名长度在6-12之间
3，密码和确认密码必须一致
4，Email必须符合邮箱格式
5，出生日期必须符合日期格式
分析：
关键点：
jQuery-validation插件
步骤：
1、插件导入
2、页面加载完成时，为表单绑定validate方法
3、加入校验规则
代码实现：
html>
<html>
<head>
<meta charset="UTF-8">
<title>title>
<style type="text/css">
body{
height:400px;
}
#divFormId{
border: 5px solid #999;
width: 640px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
}
#divbg{
background: url(img/regist_bg.jpg);
height:100%;
padding-top: 80px;
}
td{
padding-top: 10px;
}
label{
color:red;
font-size:12px;
}
style>
<script src="../js/jquery-3.3.1.min.js">script>
<script src="../js/jquery.validate.js">script>
<script src="../js/messages_zh.js">script>
<script>
$(function () {
$("#f1").validate({
rules:{
username:{
required:true,
rangelength:[6,12]
},
pwd:{
required:true
},
repwd:{
required:true,
equalTo:"#pwd"
},
email:{
required:true,
email:true
},
birthday:{
required:true,
date:true
}
}
});
});
script>
head>
<body>
<div id="divbg">
<div id="divFormId">
<form id="f1" action="#" method="get">
<table width="400">
<tr>
<td colspan="3">
<font color="#3164af" size="5">会员注册font> USER REGISTER
td>
tr>
<tr>
<td align="right">用户名td>
<td colspan="2">
<input type="text" id="username" name="username" size="40"/>
td>
tr>
<tr>
<td align="right">密码td>
<td colspan="2">
<input type="password" id="pwd" name="pwd" size="40"/>
td>
tr>
<tr>
<td align="right">确认密码td>
<td colspan="2">
<input type="password" id="repwd" name="repwd" size="40"/>
td>
tr>
<tr>
<td align="right">Emailtd>
<td colspan="2"><input type="text" id="email" name="email" size="40"/> td>
tr>
<tr>
<td align="right">性别td>
<td colspan="2">
<input type="radio" name="sex" value="man" checked="checked" />男
<input type="radio" name="sex" value="woman" />女
td>
tr>
<tr>
<td align="right">出生日期td>
<td colspan="2"><input type="text" id="birthday" name="birthday" size="40"/> td>
tr>
<tr>
<td width="80" align="right">验证码td>
<td width="100"><input type="text" id="verifyCode" name="verifyCode" /> td>
<td><img src="img/verifyCode.jpg" /> td>
tr>
<tr>
<td>td>
<td colspan="2">
<input type="image" src="img/submit.jpg" />
td>
tr>
table>
form>
div>
div>
body>
html> -
相关阅读:
基于python的毕业设计本地健康宝微信小程序
C++类模板是一种通用的编程工具，可以创建可以适用于多种数据类型的类
Netty源码学习3——Channel ，ChannelHandler，ChannelPipeline
IIS发布.net网站(配置Nginx以及HTTP和HTTPS)
Mybatis-plus快速入门
前端工程师的摸鱼日常（17）
MySQL高级9-锁
today‘s task
分组后过滤再合并组成员
【Leetcode】1573. Number of Ways to Split a String
- 原文地址：https://blog.csdn.net/m0_64550837/article/details/126317910