一.字符串的trim函数

<!DOCTYPE html>
<html>
 
	<head>
		<title>字符串的trim()方法</title>
	</head>
	<body>
			<script type="text/javascript">
				//低版本的IE浏览器不支持字符串的trim()函数，怎么办？
				//可以自己对String类扩展一个全新的trim()函数
				String.prototype.trim = function(){
    
    
					return this.replace(/^\s+/,"000").replace(/\s+$/,"000")
				}
				window.onload = function(){
    
    
					document.getElementById("myButton").onclick=function(){
    
    
						alert(document.getElementById('myText').value.trim())

					}
				}

			</script>
			<input type="text" id="myText"/>
			<input type="button" id="myButton" value="去除前后空白"/>
</html>

二.表单验证Demo

<!DOCTYPE html>
<html>
	<head>
		<title>表单验证</title>
		<!--第一次写的时候忘记了把style加到head里面，title下面-->
		<!--还有，每个样式后面最好加上分号，第一次的时候忘记了加-->
		<style type="text/css">

 		span{
    
    
 			color: red;
 			font-size: 12px;
 		}
 		</style>
	</head>
	<body>
			<script type="text/javascript">
				/*
				不能在这里得到，因为程序一开始执行是script中自上而下的，一开始就执行script的代码。
				但是在开始的时候，span还没有赋值，所以为空，所以应该在onload方法中得到span
				得到用户名提示错误的Span
				var usernameErrorSpan = document.getElementById("usernameError");*/
				window.onload = function(){
    
    
					//得到用户名提示错误的Span
					var usernameErrorSpan = document.getElementById("usernameError");
					//给用户名注册失去焦点事件
					var userName = document.getElementById("username");
					userName.onblur = function(){
    
    
						//清除空格
						userName.value = userName.value.trim();
						//alert(userName.value)
						if(userName.value){
    
    
							//用户名不为空
							if(userName.value.length<6 || userName.value.length>14){
    
    
								//用户名长度非法
								usernameErrorSpan.innerText="用户名长度必须在6-14位之间";
							}else{
    
    
								//用户名长度合法
								var regExp = /^[A-Za-z0-9]+$/;
								if(regExp.test(userName.value)){
    
    
									//用户名不包括非法字符
								}else{
    
    
									//用户名包括非法字符
									usernameErrorSpan.innerText="用户名只能由数字和字母组成";
								}
							}
						}else{
    
    
							//用户名为空
							//alert("用户名不能为空");
							usernameErrorSpan.innerText="用户名不能为空";
						}
					}

					//当用户又点击进去之后，红色提示消失
					userName.onfocus=function(){
    
    
							usernameErrorSpan.innerText="";
					}

					//确认密码验证
					//得到密码框的Ele
					var userPwd = document.getElementById("userpwd");
					//得到确认密码框的Ele
					var userPwd2 = document.getElementById("userpwd2");
					//得到密码错误的span
					var userPwdError = document.getElementById("userpwdError");
					userPwd2.onblur=function(){
    
    
						if(userPwd.value != userPwd2.value){
    
    
							//提示用户两次密码不一致
							userPwdError.innerText="两次密码不一致";
						}else{
    
    
							//两次密码一致
						}
					}
					userPwd2.onfocus=function(){
    
    
						if(userPwdError != ""){
    
    
							//说明有问题，那就得把值清空
							userPwd2.value="";
						}
						//把红色提示清空
						userPwdError.innerText="";
					}

					//得到邮箱错误的span
					var emailErrorSpan = document.getElementById("emailError");
					//得到邮箱错误Ele
					var email = document.getElementById("email");
					//给邮箱绑定onblur事件
					email.onblur=function(){
    
    
						//创建正则表达式
						var regExp = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
						//验证邮箱的正则表达式
						if(regExp.test(email.value)){
    
    
							//说明合法
						}else{
    
    
							//邮箱不合法
							emailErrorSpan.innerText="邮箱地址不合法";
						}
					}
					//给邮箱绑定onfocus事件
					email.onfocus=function(){
    
    
						if(emailErrorSpan.innerText != ""){
    
    
							//说明邮箱地址不合法，则清空
							email.value = "";
						}
						emailErrorSpan.innerText = "";
					}

					//获得表单对象，方便提交表单
					var form = document.getElementById("myForm");
					//给提交按钮绑定点击事件
					var submit = document.getElementById("mySubmit");
					submit.onclick=function(){
    
    
						//走一遍 用户名 确认密码 邮箱 的 focus和blur
						userName.focus();
						userName.blur();

						userPwd2.focus();
						userPwd2.blur();

						email.focus();
						email.blur();

						//走完之后就能通过是否有错误提示来判断是否能提交表单了
						if(usernameErrorSpan.innerText=="" && userpwdError.innerText=="" && emailErrorSpan.innerText==""){
    
    
							//提交表单
							form.submit();
						}
					}
				}
			</script>
			<!--这里本应该用post，但是为了测试，所以用了get-->
			<form href="http://localhost:8080/jd/save" method="get" id="myForm">
				用户名<input type="text" name="username" id="username"/><span id="usernameError"></span><br>
				密码<input type="text" name="userpwd" id="userpwd"/><br>
				确认密码<input type="text" id="userpwd2"/><span id="userpwdError"></span><br>
				邮箱<input type="text" name="email" id="email"/><span id="emailError"></span><br>
				<input type="button" value="提交" id="mySubmit"/><!--这里要换成button而不是submit，因为数据不一定合法-->
				<input type="reset" value="重置"/>
			</form>
</html>

Web从小白到大神Day13 2020.10.18

一.字符串的trim函数

二.表单验证Demo

猜你喜欢