`
zzuwangkun
  • 浏览: 2849 次
  • 性别: Icon_minigender_1
  • 来自: 北京
最近访客 更多访客>>
社区版块
存档分类
最新评论

js前端的页面校验

 
阅读更多
//用户登录的页面校验
$(function(){
	$('#loginId').click(function(){
		if ($('#u').val() == "") {
			$('#umsg').html("<font color='red'><b>用户名不能为空</b></font>");
			return false;
		}else {
			$("#umsg").removeAttr("disabled");
		}
		if ($('#p').val() == "") {
			$('#umsg').html("<font color='red'><b>密码不能为空</b></font>");
			return false;
		}
		$('#loginId').submit();
	}); 
});

   

var reMethod = "GET",
	pwdmin = 6;
//注册页面的校验
$(document).ready(function() {
	$('#reg').click(function() {
		if ($('#user').val() == "") {
			$('#user').focus().css({
				border: "1px solid red",
				boxShadow: "0 0 2px red"
			});
			$('#userCue').html("<font color='red'><b>×用户名不能为空</b></font>");
			return false;
		}
		if ($('#user').val().length < 4 || $('#user').val().length > 16) {

			$('#user').focus().css({
				border: "1px solid red",
				boxShadow: "0 0 2px red"
			});
			$('#userCue').html("<font color='red'><b>×用户名位4-16字符</b></font>");
			return false;
		}
		$.ajax({
			type: reMethod,
			url: "/member/ajaxyz.php",
			data: "uid=" + $("#user").val() + '&temp=' + new Date(),
			dataType: 'html',
			success: function(result) {
				if (result.length > 2) {
					$('#user').focus().css({
						border: "1px solid red",
						boxShadow: "0 0 2px red"
					});$("#userCue").html(result);
					return false;
				} else {
					$('#user').css({
						border: "1px solid #D7D7D7",
						boxShadow: "none"
					});
				}
			}
		});
		if ($('#passwd').val().length < pwdmin) {
			$('#passwd').focus();
			$('#userCue').html("<font color='red'><b>×密码不能小于" + pwdmin + "位</b></font>");
			return false;
		}
		if ($('#passwd2').val() != $('#passwd').val()) {
			$('#passwd2').focus();
			$('#userCue').html("<font color='red'><b>×两次密码不一致!</b></font>");
			return false;
		}
		var sqq = /^[1-9]{1}[0-9]{4,9}$/;
		if (!sqq.test($('#qq').val()) || $('#qq').val().length < 5 || $('#qq').val().length > 12) {
			$('#qq').focus().css({
				border: "1px solid red",
				boxShadow: "0 0 2px red"
			});
			$('#userCue').html("<font color='red'><b>×QQ号码格式不正确</b></font>");return false;
		} else {
			$('#qq').css({
				border: "1px solid #D7D7D7",
				boxShadow: "none"
			});			
		}
		$('#regUser').submit();
	});  
});

 

分享到:
评论

相关推荐

    js javaScript 验证校验小工具包

    JavaScript是Web开发中不可或缺的一部分,尤其在前端领域,它提供了丰富的功能来实现用户交互、数据验证和页面动态更新。这个"js javaScript 验证校验小工具包"显然是一个集合了各种JavaScript验证和校验功能的资源...

    页面的数据校验JS和HTML

    从给定的文件信息来看,我们正在探讨的主题是“页面的数据校验JS和HTML”,这是一个在Web开发中非常重要的主题,特别是在确保用户输入数据的有效性和安全性方面。下面将详细解析这个主题的关键知识点。 ### 页面...

    常有前端验证JS

    在前端开发中,JavaScript 是实现用户交互和数据验证的关键技术。`validate.js` 可能是一个专门用于前端验证的库,它提供了丰富的功能,帮助开发者确保用户输入的数据符合预期的格式和规则,从而提高用户体验并保护...

    nice-validator前端校验js及demo

    nice-validator的使用相当简单,首先需要在HTML页面中引入js文件,然后通过JavaScript代码创建验证器实例,并绑定到目标表单元素。例如: ```html &lt;script src="nice-validator.js"&gt;&lt;/async&gt;&lt;/script&gt; ``` ``...

    页面输入校验

    9. **前端框架集成**:现代前端框架(如React、Vue、Angular等)提供了内置的校验机制和库,使得开发人员可以方便地集成和管理输入校验。 10. **持续优化**:随着业务的发展和用户需求的变化,输入校验规则需要不断...

    前端经典——vue实现登录页面开屏广告+校验demo.rar

    在本项目中,“前端经典——vue实现登录页面开屏广告+校验demo”是一个使用Vue.js框架构建的示例应用,旨在展示如何在前端开发中创建一个包含登录页面、开屏广告以及用户输入校验功能的应用。Vue.js是当前非常流行的...

    后台JS校验框架

    在IT领域,后台JS校验框架是用于在服务器端执行JavaScript代码,对用户提交的数据进行验证的一种工具。这种框架通常被开发人员用来提高应用的安全性和用户体验,因为它可以在数据到达数据库之前检测并处理潜在的错误...

    一个标准的register注册页面(含JS校验和页面跳转)

    【标题】中的“一个标准的register注册页面(含JS校验和页面跳转)”指的是一种常见的Web开发场景,即创建一个用户注册界面,其中包含了JavaScript进行的数据验证以及基于验证结果的页面重定向功能。这样的页面是任何...

    js实现用户离开页面前提示是否离开此页面的方法(包括浏览器按钮事件)

    本文实例讲述了js实现用户离开页面前提示是否离开此页面的方法(包括浏览器按钮事件)。分享给大家供大家参考。具体如下: 用户离开页面前,提示是否离开此页面(包括浏览器按钮事件) [removed] [removed] = ...

    页面特效JavaScript校验等

    "页面特效JavaScript校验等"这一主题涵盖了两个主要概念:页面特效和JavaScript验证。 页面特效是网页设计中的一个关键元素,它使得用户体验更加生动有趣。JavaScript能够帮助开发者创建出各种各样的视觉效果,如...

    前端HTMl用户注册及验证示例

    前端HTMl用户注册及验证示,帮助html JavaScript新手学习者了解并学习用户注册及js验证

    js文本框校验控件

    在网页开发中,JavaScript(简称JS)是一种必不可少的前端编程语言,它被广泛用于实现页面交互和用户输入验证。"js文本框校验控件"是JavaScript技术在表单验证中的应用,主要用于确保用户在输入框中输入的数据符合...

    Cron expression 校验 js版本

    这篇名为"Cron expression 校验 js版本"的博客文章可能详细介绍了如何用JavaScript编写一个Cron表达式校验函数。作者可能分享了如何将Cron字符串分解为各个部分,逐一检查每个部分的合法性,以及如何处理特殊情况,...

    网页中的各种校验大全

    网页中的校验是确保数据质量和用户体验的关键环节,尤其是在前端开发中。正则表达式是实现这些校验的强大工具,能够高效地验证用户输入是否符合预设的格式要求。本资源"网页中的各种校验大全"提供了全面的正则表达式...

    注册js校验 验证码

    在IT行业中,前端开发是至关重要的一个环节,尤其是在用户注册过程中,为了确保数据的准确性和安全性,通常会采用各种校验机制。本话题主要聚焦于“注册js校验 验证码”这一主题,我们将深入探讨JavaScript在实现...

    常用js大全,javascript校验大全

    这个“常用js大全,javascript校验大全”集合了多种常见的验证功能,确保用户输入的数据格式正确,从而提高用户体验和系统安全性。以下是一些主要的知识点: 1. **数字验证**:用于检查字符串是否全由数字组成,这...

    web前端 input添加属性就可以验证 自动验证工具

    这种方法尤其适合于jQuery环境,代码简洁易懂,能够快速集成到项目中,减少页面的校验负担。 首先,我们来了解`input`标签在HTML中的作用。`&lt;input&gt;`元素是表单中用于接收用户输入的数据的基本组件,通过设置不同的...

    jsp的注册与登录页面,采用简单js校验

    "采用简单js校验"表明注册和登录表单使用JavaScript进行了一些基本的输入验证,如非空检查、格式验证等。 **注册页面** 通常包含用户信息输入字段,如用户名、电子邮件、密码等。前端验证可能包括检查用户名是否为...

    web端,及移动端H5前端人脸识别所必须的tracking-min.js与face-min.js文件

    web端,及移动端H5前端人脸识别所必须的tracking-min.js与face-min.js文件,在vue项目中新建assets文件夹,tracking-min.js与face-min.js文件解压到新建文件内,最后再.vue文件中引用。

    POI导入Excel并返回校验后的错误文件(原样)下载以及校验错误信息,同时加进度条

    POI导入Excel并返回校验后的错误文件(原样数据文件,并添加批注,注:由于批注只能加1000条,会在Excel后面添加一栏错误信息)下载以及页面展示...(注:解析xlsx文档出错,已在前端页面js控制,项目紧,后期优化)

Global site tag (gtag.js) - Google Analytics