<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Easyform表单验证插件实现简易注册表单验证代码</title>
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="js/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="js/easyform.js"></script>
</head>
<body>
<div class="form-div">
<form id="reg-form" action="http://www.sucaijiayuan.com" method="post">
<table>
<tr>
<td>用户名</td>
<td>
<input name="uid" type="text" id="uid" easyform="length:4-16;char-normal;real-time;" message="请输入4-6位字符用户名1" easytip="disappear:lost-focus;theme:red;" ajax-message="用户名已存在!">
</td>
</tr>
<tr>
<td>密码</td>
<td>
<input name="psw1" type="password" id="psw1" easyform="length:6-16;" message="密码必须为6—16位" easytip="disappear:lost-focus;theme:red;">
</td>
</tr>
<tr>
<td>确认密码</td>
<td>
<input name="psw2" type="password" id="psw2" easyform="length:6-16;equal:#psw1;" message="两次密码输入要一致" easytip="disappear:lost-focus;theme:red;">
</td>
</tr>
<tr>
<td>email</td>
<td>
<input name="email" type="text" id="email" easyform="email;real-time;" message="Email格式要正确" easytip="disappear:lost-focus;theme:red;" ajax-message="这个Email地址已经被注册过，请换一个吧!">
</td>
</tr>
<tr>
<td>昵称</td>
<td>
<input name="nickname" type="text" id="nickname" easyform="length:2-16" message="昵称必须为2—16位" easytip="disappear:lost-focus;theme:red;">
</td>
</tr>
<tr>
<td>自定义</td>
<td>
<input name="nickname" type="checkbox" id="nickname" easyform="length:2-16" message="昵称必须为2—16位" easytip="disappear:lost-focus;theme:red;">
</td>
</tr>
</table>
<div class="buttons">
<input value="注 册" type="submit">
</div>
<br class="clear">
</form>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#reg-form').easyform();
});
</script>
</body>
</html>
- 1
- 2
前往页