基于jQuery实现表单提交验证

html表单代码：

用户名：

邮箱：

个人资料：

jQuery代码： $(function(){ $("form :input.required").each(function(){ var $required = $(" *"); //$(this).parent().append($required); //追加到文档中 $(this).parent().prepend($required); }); $('form :input').blur(function(){ var $parent = $(this).parent(); if($(this).is('#username')){ if(this.value==""||this.value.length<6){ var errorMsg = '请输入至少6位的用户名'; $parent.append(' '+errorMsg+''); }else{ var okMsg = '输入正确'; $parent.append(' '+okMsg+''); } } if($(this).is('#email')){ if(this.value==""||(this.value!=""&&!/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value))){ var errorMsg = '请输入正确的E-mail地址'; $parent.append(' '+errorMsg+''); }else{ var okMsg = '输入正确'; $parent.append(' '+okMsg+''); } } }); $("form :input").focus(function(){ var $parent = $(this).parent(); $parent.find(".formtips").remove(); }); $("#send").click(function(){ var $parent = $(this).parent().parent(); $parent.find(".formtips").remove(); $("form .required:input").trigger('blur'); var numError = $('form .onError').length; if(numError){ return false; } }); $("#res").click(function(){ var $parent = $(this).parent().parent(); $parent.find(".formtips").remove(); }); });

基于jQuery实现表单提交验证相关推荐

基于jQuery的表单验证插件：jValidate
网上基于jQuery的表单验证插件已有很多,但是这个轮子我还是继续做一个,因为这个表单验证插件是从我以前的个人JS框架移值过来的(我已慢慢投入jQuery的怀抱),并且它的验证规则书写方式也许会让你眼 ...
基于jQuery的表单验证插件Validation Engine
Validation Engine是一款基于Jquery的js表单验证插件.相对于之前的传统表单验证工具,其优点是自定义验证内容更广泛以及与AJAX的方便整合. 附件提供了该插件,解压密码为:im48 ...
表单ajax提交插件,jQuery Form 表单提交插件-----ajaxSubmit() 的应用
Form Plugin API 里提供了很多有用的方法可以让你轻松的处理表单里的数据和表单的提交过程. 测试环境:部署到Tomcat中的web项目. 一.ajaxSubmit() 介绍立即通过AJA ...
django后台添加学生-jquery实现表单正则表达式验证，判断是否可以进行提交
话不多说,先放图左边的导航就不放代码了,需要再问 (1)视图模板 (2)路由(urls.p) (3)views.py # GET:向服务器获取数据 # POST:向服务器提交数据 # 添加学 ...
原生JS 表单提交验证器
一.前言最近在开发一个新项目,需要做登陆等一系列的表单提交页面.在经过"缜密"的讨论后,我们决定不用外部流行的框架,如bootstrap,由于我负责的模块仅仅是其中的一部分, ...
表单提交验证新实践之class-validator
class-validator实践篇之前有一篇关于class-validator的基础的介绍,这篇来一下如何实践: 首先介绍一下业务背景:简单来说就是一个表单提交 ,根据类型的选择进行四种提交模式. ...
Angualr6表单提交验证并跳转
在Angular6中,使用NG-ZRROR作为前端开发框架,在进行表单开发时遇到了一些问题,最后解决了,在此记录. 1.表单构造: 引入forms: import { FormGroup, FormB ...
JQuery控制表单提交
规范化DOM 第一种方案: <form><div id="closePanel">+</div><div id="formTit ...
jQuery 阻止表单提交
1. 利用 οnsubmit="return false" 阻止表单提交 <form action="" method="get" ...

基于jQuery实现表单提交验证

基于jQuery实现表单提交验证相关推荐

最新文章

热门文章