自己动手丰衣足食之Easyform表单验证插件validate.js实时验证

2023-10-06 23:30
文章标签 表单 js 验证 实时 插件 动手 validate easyform 丰衣足食

本文主要是介绍自己动手丰衣足食之Easyform表单验证插件validate.js实时验证，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

这里写图片描述

下载地址：http://download.csdn.net/detail/cometwo/9437671

<!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>

CCS:

@charset "utf-8";
* {margin: 0;padding: 0;list-style-type: none;
}a,
img {border: 0;
}body {font: 16/180% Arial, Helvetica, sans-serif, "微软雅黑", "黑体";background: #eee;text-align: center;
}table {border-collapse: collapse;border-spacing: 0;}td,
th {text-align: center;padding: 0;border: 1px solid red;
}.clear {clear: both;
}.clear:before,
.clear:after {content: "";display: table;
}.clear:after {clear: both;
}/* form-div */.form-div {background-color: rgba(255, 255, 255, 0.67);border-radius: 20px;border: 1px solid black;width: 424px;margin: 100px auto;padding: 30px 0 20px 0px;font-size: 12px;box-shadow: inset 0px 0px 10px rgba(255, 255, 255, 0.5), 0px 0px 15px rgba(75, 75, 75, 0.3);text-align: left;
}.form-div input[type="text"],
.form-div input[type="password"],
.form-div input[type="email"] {width: 268px;margin: 10px;line-height: 20px;font-size: 16px;border: 1px solid blue;
}.form-div input[type="checkbox"] {margin: 20px 0 20px 10px;
}.form-div input[type="button"],
.form-div input[type="submit"] {margin: 10px 0 0 0;
}.form-div table {margin: 0 auto;text-align: center;color: rgba(64, 64, 64, 1.00);
}.form-div table img {vertical-align: middle;margin: 0 0 5px 0;
}.footer {color: rgba(64, 64, 64, 1.00);font-size: 12px;margin-top: 30px;
}.form-div .buttons {text-align: center;
}input[type="text"],
input[type="password"],
input[type="email"] {border-radius: 18px;box-shadow: inset 0 2px 5px #eee;padding: 10px;color: #333333;margin-top: 5px;
}input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus {border: 1px solid green;outline: none;color: red;          background-color: yellow; 
}input[type="button"],
input[type="submit"] {padding: 7px 15px;background-color: #3c6db0;text-align: center;border-radius: 5px;overflow: hidden;min-width: 80px;border: none;color: #FFF;box-shadow: 1px 1px 1px rgba(75, 75, 75, 0.3);
}input[type="button"]:hover,
input[type="submit"]:hover {background-color: black;color: blueviolet;
}input[type="button"]:active,
input[type="submit"]:active {background-color: green;
}

这里写图片描述

链接http://www.sucaijiayuan.com/Js/BiaoDanAnNiu/543.html下载地址http://download.csdn.net/detail/cometwo/9444151

<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>jquery表单验证不通过边框变色的代码 - 97站长网 - www.97zzw.com</title><script type="text/javascript" src="js/jquery-1.4.2.min.js"></script><script type="text/javascript" src="js/validate.pack.js"></script><link href="css/validate.css" rel="stylesheet" type="text/css" /></head><body><h1>JQuery表单验证DEMO</h1><hr /><form name="validateForm" action="http://www.97zzw.com/" method="post"><table width="50%" border="1px " class="ad" cellpadding="0" cellspacing="1" bgcolor="pink" id="testTable"><tr bgcolor="#ffffff"><td align="left" bgcolor="red" width="150px" style="padding-left: 15px; padding-top: 4px; padding-bottom: 4px; padding-right: 18px;">玩家账号 :</td><td align="left" style="padding-left: 5px; padding-top: 4px; padding-bottom: 4px; padding-right: 18px;"><input name="flightno" type="text" id="flightno" reg="^\w{4}\d+$" tip="游戏商名称[4个字母简写]+用户ID[数字] 如:yuuk520" /></td></tr><tr bgcolor="#ffffff"><td align="right" bgcolor="#EEEEEE" width="150px" style="padding-left: 5px; padding-top: 4px; padding-bottom: 4px; padding-right: 18px;">中文姓名 :</td><td align="left" style="padding-left: 5px; padding-top: 4px; padding-bottom: 4px; padding-right: 18px;"><input name="floatNum" type="text" id="floatNum" reg="^[\u4e00-\u9fa5]+$" tip="只允许中文字符" /></td></tr><tr bgcolor="#ffffff"><td align="right" bgcolor="#EEEEEE" width="150px" style="padding-left: 5px; padding-top: 4px; padding-bottom: 4px; padding-right: 18px;">电话号码 :</td><td align="left" style="padding-left: 5px; padding-top: 4px; padding-bottom: 4px; padding-right: 18px;"><input name="str" type="text" id="str" reg="^\d{3}-\d{8}$|^\d{4}-\d{7}$" tip="国内电话号码，格式: 0832-4405222 或 021-87888822" /></td></tr><tr bgcolor="#ffffff"><td align="right" bgcolor="#EEEEEE" width="150px" style="padding-left: 5px; padding-top: 4px; padding-bottom: 4px; padding-right: 18px;">邮箱地址 :</td><td align="left" style="padding-left: 5px; padding-top: 4px; padding-bottom: 4px; padding-right: 18px;"><input name="groupname" type="text" id="groupname" reg="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$" tip="邮箱地址，如：yuuk@97zzw.com" /></td></tr><tr bgcolor="#ffffff"><td align="right" bgcolor="#EEEEEE" width="150px" style="padding-left: 5px; padding-top: 4px; padding-bottom: 4px; padding-right: 18px;">网址 :</td><td align="left" style="padding-left: 5px; padding-top: 4px; padding-bottom: 4px; padding-right: 18px;"><input name="time1" type="text" id="time1" reg="^(http|https|ftp)\://[a-zA-Z0-9\-\.]+\.[a-zA-Z]{2,3}(:[a-zA-Z0-9]*)?/?([a-zA-Z0-9\-\._\?\,\'/\\\+&%\$#\=~])*$" tip="URl格式，允许FTP,HTTP,HTTPS" /></td></tr><tr bgcolor="#ffffff"><td align="right" bgcolor="#EEEEEE" width="150px" style="padding-left: 5px; padding-top: 4px; padding-bottom: 4px; padding-right: 18px;">图片上传 :</td><td align="left" style="padding-left: 5px; padding-top: 4px; padding-bottom: 4px; padding-right: 18px;"><input name="imgFile" type="file" id="imgFile" reg=".*gif|png$" tip="允许GIF,PNG图片" /></td></tr><tr bgcolor="#ffffff"><td align="right" bgcolor="#EEEEEE" width="150px" style="padding-left: 5px; padding-top: 4px; padding-bottom: 4px; padding-right: 18px;">来自哪里 :</td><td align="left" style="padding-left: 5px; padding-top: 4px; padding-bottom: 4px; padding-right: 18px;"><select id="from" name="from" reg="[^0]"><option value="0">－－请选择你来自哪里－－</option><option value="a">北京</option><option value="b">上海</option><option value="c">四川</option></select> <span name="easyTip"></span></td></tr><tr bgcolor="#ffffff"><td align="right" bgcolor="#EEEEEE" width="150px" style="padding-left: 5px; padding-top: 4px; padding-bottom: 4px; padding-right: 18px;">文本 :</td><td align="left" style="padding-left: 5px; padding-top: 4px; padding-bottom: 4px; padding-right: 18px;"><textarea name="myeara" reg="^\w+$" tip="不能为空" cols="40" rows="5"></textarea></td></tr><tr bgcolor="#ffffff"><td colspan="2" align="center" style="padding-left: 5px; padding-top: 4px; padding-bottom: 4px; padding-right: 18px;"><input type="submit" name="submit" value=" 提交 " id="submit" /></td></tr></table></form></body>
</html>

validate.js实时验证插件

这里写图片描述

鼠标只要一离开就验证，很强大http://www.sucaijiayuan.com/Js/BiaoDanAnNiu/1202.html 下载地址http://download.csdn.net/detail/cometwo/9444151

<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link rel="stylesheet" type="text/css" href="css/register.css" /><script type="text/javascript" src="js/jquery-1.8.3-min.js"></script><script type="text/javascript" src="js/jquery.validate.js"></script><script type="text/javascript" src="js/jquery.metadata.js"></script><script type="text/javascript" src="js/resgin.js"></script><title>jQuery表单验证插件 - 素材家园（www.sucaijiayuan.com）</title></head><body><div class="wrapper"><form id="signupForm" method="post" action="" class="zcform"><p class="clearfix"><label class="one" for="telphone">手机号码：</label><input id="telphone" name="telphone" class="required" value placeholder="请输入手机号" /></p><p class="clearfix"><label class="one">校验码：</label><input class="identifying_code" type="text" value placeholder="请输入手机6位校验码" /><input class="get_code" type="button" value="获取验证码" /></p><p class="clearfix"><label class="one" for="password">登录密码：</label><input id="password" name="password" type="password" class="{required:true,rangelength:[8,20],}" value placeholder="请输入密码" /></p><p class="clearfix"><label class="one" for="confirm_password">确认密码：</label><input id="confirm_password" name="confirm_password" type="password" class="{required:true,equalTo:'#password'}" value placeholder="请再次输入密码" /></p><p class="clearfix"><label class="one" for="agent">经纪人号：</label><input id="agent" name="agent" type="text" class="required" value placeholder="请输入经纪人手机号" /></p><p class="clearfix agreement"><input type="checkbox" /><b class="left">已阅读并同意<a href="#">《用户协议》</a></b> </p><p class="clearfix"><input class="submit" type="submit" value="立即注册" /></p><p class="last"><a href="http://www.sucaijiayuan.com/">立即登录&gt;</a></p></form></div></body></html>

验证源码

/*
本代码由素材家园收集并编辑整理;
尊重他人劳动成果;
转载请保留素材家园链接 - www.sucaijiayuan.com
*/
/*-------注册验证-----------*/
$().ready(function() {$("#signupForm").validate({rules: {telphone: {required: true,rangelength: [11, 11],digits: "只能输入整数"},password: {required: true,rangelength: [8, 20]},confirm_password: {required: true,equalTo: "#password",rangelength: [8, 20]},agent:{required: true,rangelength: [1, 3]}},messages: {telphone: {required: "请输入手机号",rangelength: jQuery.format("请输入正确的手机号"),},password: {required: "请输入密码",rangelength: jQuery.format("密码在8~20个字符之间"),},confirm_password: {required: "请输入确认密码",rangelength: jQuery.format("密码在8~20个字符之间"),equalTo: "两次输入密码不一致"},agent: {required: "我是agent",rangelength: jQuery.format("位数1-3"),}}});
});

这篇关于自己动手丰衣足食之Easyform表单验证插件validate.js实时验证的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/154567。

相关文章

使用Python和OpenCV库实现实时颜色识别系统

使用Python和OpenCV库实现实时颜色识别系统

《使用Python和OpenCV库实现实时颜色识别系统》：本文主要介绍使用Python和OpenCV库实现的实时颜色识别系统,这个系统能够通过摄像头捕捉视频流,并在视频中指定区域内识别主要颜色（红... 目录一、引言二、系统概述三、代码解析1. 导入库2. 颜色识别函数3. 主程序循环四、HSV色彩空间详解
阅读更多...
OpenCV实现实时颜色检测的示例

OpenCV实现实时颜色检测的示例

《OpenCV实现实时颜色检测的示例》本文主要介绍了OpenCV实现实时颜色检测的示例,通过HSV色彩空间转换和色调范围判断实现红黄绿蓝颜色检测,包含视频捕捉、区域标记、颜色分析等功能,具有一定的参考... 目录一、引言二、系统概述三、代码解析1. 导入库2. 颜色识别函数3. 主程序循环四、HSV色彩空间
阅读更多...
CnPlugin是PL/SQL Developer工具插件使用教程

CnPlugin是PL/SQL Developer工具插件使用教程

《CnPlugin是PL/SQLDeveloper工具插件使用教程》：本文主要介绍CnPlugin是PL/SQLDeveloper工具插件使用教程,具有很好的参考价值,希望对大家有所帮助,如有错... 目录PL/SQL Developer工具插件使用安装拷贝文件配置总结PL/SQL Developer工具插
阅读更多...
maven中的maven-antrun-plugin插件示例详解

maven中的maven-antrun-plugin插件示例详解

《maven中的maven-antrun-plugin插件示例详解》maven-antrun-plugin是Maven生态中一个强大的工具,尤其适合需要复用Ant脚本或实现复杂构建逻辑的场景... 目录1. 核心功能2. 典型使用场景3. 配置示例4. 关键配置项5. 优缺点分析6. 最佳实践7. 常见问题
阅读更多...
使用Python获取JS加载的数据的多种实现方法

使用Python获取JS加载的数据的多种实现方法

《使用Python获取JS加载的数据的多种实现方法》在当今的互联网时代,网页数据的动态加载已经成为一种常见的技术手段,许多现代网站通过JavaScript（JS）动态加载内容,这使得传统的静态网页爬取... 目录引言一、动态 网页与js加载数据的原理二、python爬取JS加载数据的方法（一）分析网络请求1
阅读更多...
MyBatis分页插件PageHelper深度解析与实践指南

MyBatis分页插件PageHelper深度解析与实践指南

《MyBatis分页插件PageHelper深度解析与实践指南》在数据库操作中,分页查询是最常见的需求之一,传统的分页方式通常有两种内存分页和SQL分页,MyBatis作为优秀的ORM框架,本身并未提... 目录1. 为什么需要分页插件？2. PageHelper简介3. PageHelper集成与配置3.
阅读更多...
Maven 插件配置分层架构深度解析

Maven 插件配置分层架构深度解析

《Maven插件配置分层架构深度解析》：本文主要介绍Maven插件配置分层架构深度解析,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录Maven 插件配置分层架构深度解析引言：当构建逻辑遇上复杂配置第一章 Maven插件配置的三重境界1.1 插件配置的拓扑
阅读更多...
Idea插件MybatisX失效的问题解决

Idea插件MybatisX失效的问题解决

《Idea插件MybatisX失效的问题解决》：本文主要介绍Idea插件MybatisX失效的问题解决,详细的介绍了4种问题的解决方法,具有一定的参考价值,感兴趣的可以了解一下... 目录一、重启idea或者卸载重装MyBATis插件（无需多言）二、检查.XML文件与.Java（该文件后缀Idea可能会隐藏
阅读更多...
VSCode中配置node.js的实现示例

VSCode中配置node.js的实现示例

《VSCode中配置node.js的实现示例》本文主要介绍了VSCode中配置node.js的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着... 目录一.node.js下载安装教程二.配置npm三.配置环境变量四.VSCode配置五.心得一.no
阅读更多...
使用Python实现实时金价监控并自动提醒功能

使用Python实现实时金价监控并自动提醒功能

《使用Python实现实时金价监控并自动提醒功能》在日常投资中,很多朋友喜欢在一些平台买点黄金,低买高卖赚点小差价,但黄金价格实时波动频繁,总是盯着手机太累了,于是我用Python写了一个实时金价监控... 目录工具能干啥？手把手教你用1、先装好这些"食材"2、代码实现讲解1. 用户输入参数2. 设置无头浏
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2