JS ------ 表单校验

最新推荐文章于 2022-09-24 00:59:12 发布
最新推荐文章于 2022-09-24 00:59:12 发布
阅读量131 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42412646/article/details/102945112
版权 
<html>
	<head>
		<title>注册页面</title>
		<meta charset="UTF-8"/>
		<script type="text/javascript">
//			校验用户名
			function checkUname(){
//				获取用户名对象
				var uname=document.getElementById("uname").value;
//				创建校验正则表达式判断条件
				var reg=/^[\u4e00-\u9fa5]{2，4}$/;          //其中前面的一部分是汉字的正则表达式，后面的是汉字的合法范围
//				获取后面的提示字
				var nameSpan=document.getElementById("nameSpan"); //span是一个没有特殊含义的自定义标签用来辅助设计
//				进行校验
				if(uname=="" || uname ==null){
					nameSpan.innerHTML="用户名不能为空";
					nameSpan.style.color="red";
				}else if(reg.test(uname)){
					nameSpan.innerHTML="用户名合法";
					nameSpan.style.color="green";
				}else{
					nameSpan.innerHTML="用户名不合法";
					nameSpan.style.color="red";
				}
			}
		</script>
		<style type="text/css">
			/*tr,td,table{
				background-color: transparent;
				border 0px;
			}*/
			span{
				font-size: 10px;
			}
			#showdiv{
				width: 30%;
				height: 100%;
				background-image: url(../img/5.jpg);
				background-size: cover;
				background-repeat: no-repeat;
				margin-left: 33%;
			}
			input,select,[type=checkbox],#bigText{
				background-color: transparent;     /* 把一些边框背景变为透明的以显示背景*/
			}
		</style>
	</head>
	<body>
		<form action="#" action="get">
			<div align="center" id="showdiv">
			<table border="1px" cellpadding="5px" cellspacing="0px">
				<tr height="30px">
					<td width="80px">姓名</td>
					<td width="180px">
						<input type="text" name="uname" value="" id="uname"  onblur="checkUname()"/>
						<span id="nameSpan"></span>   <!-- 以焦点的有无来进行判断-->
					</td>
				</tr>
				<tr height="30px">
					<td width="80px">邮箱</td>
					<td width="180px">
						<input type="text" name="mail" value="" />
					</td>
				</tr>
				<tr height="30px">
					<td width="80px">密码</td>
					<td width="180px">
						<input type="password" name="psw" value="" />
					</td>
				</tr>
				<tr height="30px">
					<td>性别</td>
					<td>
						男<input type="radio" name="sex" value="1" checked="checked" /> 女<input type="radio" name="sex" value="0" />
					</td>
				</tr>
				<tr height="30px">
					<td>所在地</td>
					<td>
						<select name="">
							<option value="1">山东</option>
							<option value="2">北京</option>
							<option value="3">河南</option>
						</select>
					</td>
				</tr>
				<tr height="30px">
					<td>爱好</td>
					<td>
						动漫<input type="checkbox" name="fav" id="fav" value="animation" />
						游戏<input type="checkbox" name="fav" id="fav" value="game" />
						打球<input type="checkbox" name="fav" id="fav" value="ball" />
					</td>
				</tr>
				<tr height="30px">
					<td>个人简介</td>
					<td>
						<textarea name="introduction" rows="10px" cols="25px" id="bigText"></textarea>
					</td>
				</tr>
				<tr height="30px">
					<td colspan="2"  align="center"> 
						<input type="radio" name="select" id="select" value="1" />是否同意我们的协议
					</td>
				</tr>
				<tr height="30px"s>
					<td colspan="2"  align="center">
						<input type="submit" value="注册"/>
					</td>
				</tr>
			</table>
			</div>
		</form>
	</body>
</html>

先这样，待定.............

qq_42412646
关注
Vue ~ element-ui 动态表单验证，支持添加和删除操作
07-27
对于表单验证，Vue提供了一些内置的验证工具，如v-bind:class和v-bind:style，但这些仅限于简单的校验。更复杂的验证通常需要借助于第三方库，如Vuelidate或vee-validate。在这个项目中，我们看到的是基于Element-UI...
Vee-validate 父组件获取子组件表单校验结果的实例代码
10-16
Vee-validate 是一款针对 Vue.js 的强大表单验证框架，其设计目的是简化用户输入内容的验证过程，并提供清晰的错误提示。它具有丰富的预设验证规则，如 'required'、'email'、'numeric' 等，允许开发者根据需求进行...
常用正则表达式
woodboy000的专栏
03-10 419
匹配中文字符的正则表达式： [\u4e00-\u9fa5] 评注：匹配中文还真是个头疼的事，有了这个表达式就好办了 匹配双字节字符(包括汉字在内)：[^\x00-\xff] 评注：可以用来计算字符串的长度（一个双字节字符长度计2，ASCII字符计1） 匹配空白行的正则表达式：\n\s*\r 评注：可以用来删除空白行 匹配HTML标记的正则表达式：]*>.*?| 评注：网上
ajax的学习
A123ppleQueen的博客
04-29 363
简单化的ajax在jquery文章里。
JavaScript表单验证
weixin_30376509的博客
04-17 121
表单验证的实现思路 首先获取表单元素的值 根据业务规则，对获取的数据进行判断 但表单提示时，触发onsubmit事件，对获取的数据进行验证 验证方式 String对象的属性和方法 正则表达式 String对象常用的属性和方法（与java的String对象的方法用法类似） 属性： length：返回字符串的长度（包括空格等） 方法： toLowerC...
js验证表单用户名，密码
木子李
09-24 3006
当表单用户名、密码等各项内容符合格式时，表单提交成功，否则表单验证不通过，提交失败。废话不多说，上码，效果图最后。
ajax异步校验名称输入重复,用jquery怎么验证名字在输入完之后马上提示是否有重复的代码...
weixin_42552315的博客
08-05 502
1、给输入名字的文本框绑定一个失去焦点事件，jquery中为focusout事件，同时在文本框后定义一个显示检查结果的span。2、当文本框失去焦点时，调用ajax异步向后台发送请求。3、将请求结果显示在文本框后面提示用户,避免所有信息填写完毕表单提交时才发现名字重复。示例：input type='text' id='name'/span id='errorMsg'/erorMsg//给文本框绑定...
Vue element-ui父组件控制子组件的表单校验操作
10-15
以下将详细介绍如何实现Vue Element-UI父组件控制子组件的表单校验操作。 首先，我们来看一下父组件的代码。在父组件的模板中，我们引入了一个名为`child-form`的子组件，并通过`ref`属性（`ref="childRules"`）来...
vue中使用vee-validator完成表单校验方案
10-16
import { Validator } from 'vee-validate' // 表单校验组件 import zh_CN from 'vee-validate/dist/locale/zh_CN' // 中文语言包 import en from 'vee-validate/dist/locale/en' // 英文语言包 Vue.use(VueI18n) ...
详解ng-alain动态表单SF表单项设置必填和正则校验
10-16
本文将深入探讨如何在`ng-alain`动态表单中实现SF表单项的必填验证和正则表达式校验，特别是针对手机号的验证。 首先，我们需要了解`ng-alain`中的动态表单是如何工作的。动态表单的核心是`SF`组件，它接收一个`...
var userName=$("#userName").val()如何理解
热门推荐
xuanmu
02-16 1万+
val()是返回属性value对应的值。比如，使用$("#userName").val()就得到了"123"。 $("#userName")是id选择器,获得id为userName的标签,通过.val(),获得这个标签的value的值,赋值给你声明的变量 var userName ...
JS -------- 校验最终（登陆界面）
qq_42412646的博客
11-08 176
<html> <head> <title>注册页面</title> <meta charset="UTF-8"/> <script type="text/javascript"> // 校验用户名 function checkUname(){ // 获取用户名对象 var uname=d...
js 获取字符串的UTF8编码
xfmuchengxue的博客
07-15 6371
蓝牙传递数据就转成字节流就行，即使用getUTF8Bytes（）方法就行 // 获取字符串的utf8字节流 function getUTF8Bytes(str) { var bytes = []; var len = str.length; for (var i = 0; i<len; ++ i) { var code = str....
jquery框架学习-ajax
Aring的博客
01-02 144
ajax ajax是异步传输技术，利用js和xml相结合。 ajax原本格式 function checkuname(obj) { //1，货色输入的用户名 var uname=obj.value(); //2,通过ajax（异步传输对象）将用户名传到服务器端判断用户名是否存在，并将结果带回来 //a，创建一个一部传输对象 var xmlhttp...
ajax跨域的几种解决方案
Gavin
01-12 2115
出于浏览器的同源策略限制。同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port) AJAX跨域请求 下面简单模拟一个场景----->> 前端有.
美修大数据：2022母婴洗护品类洞察报告(2).pdf
11-03
美修大数据：2022母婴洗护品类洞察报告(2).pdf
VB程序实例-图片剪切.zip
11-03
VB程序实例-图片剪切.zip
PyMySQL-0.7.9-py3-none-any.whl
最新发布
11-03
PyMySQL-0.7.9-py3-none-any.whl
VB程序实例-运行记事本.zip
11-03
VB程序实例-运行记事本.zip
Bootstrap-validator前端表单校验实战指南
2. 初始化插件：在JavaScript中，使用`bootstrapValidator`方法初始化表单验证。这个方法接受一个配置对象，用于定制验证行为。 ```javascript $(formSelector).bootstrapValidator({ // 配置项 }); ``` 3. ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值