@ 用Jquery实现添加用户表单验证功能

用JQuery实现添加用户(用户注册登录同理)表单验证功能

form表单部分

<!-- onsubmitb表单提交事件把 CheckFrom() 的结果 return 回来 如果是false的话阻止表单提交  -->
<form action="" method="post" enctype="multipart/form-data" onsubmit="return CheckFrom()"> 
	<div class ="form-group"> 
		<label for="exampleInputEmail1">账号</label> 
		<!-- onfocus 获取焦点事件 获取焦点时提示;onblue 失去焦点事件 失去焦点时验证 -->
		<input type="text" class="form-control" id="uname" placeholder="请输入账号" autocomplete="off" onfocus="focusUname()" onblur="blurUname()" > 
		<p class="help-block" id="unamemsg"></p>
	</div>
	 <div class="form-group"> 
	 	<label for="exampleInputPassword1">密码</label> 
	 	<input type="password" class="form-control" id="pass" placeholder="请输入密码" onfocus="focusPass()" onblur="blurPass()"> 
	 	<p class="help-block" id="passmsg"></p>
	 </div> 
	 <div class="form-group"> 
	 	<label for="exampleInputPassword1">确认密码</label> 
	 	<input type="password" class="form-control" id="repass" placeholder="请输入确认密码" onblur="blurRepwd()"> 
	 	<p class="help-block" id="repassmsg"></p>
	 </div> 
	 <div class="form-group"> 
	 	<label for="exampleInputFile">上传头像</label>
	 	<input type="file" id="fileName" onblur="blurfileName()">
	 	<p class="help-block" id="fileNameMsg">只支持.jpg|.jpeg|.gif|.png结尾的图片</p> 
	 </div> 
	 
	 <button type="submit" class="btn btn-default">提交</button> 
</form>

JQuery部分

<script type="text/javascript">
	// 总检测函数 如果账号,密码,确认密码,头像上传, 其中有一项错误表单无法提交
	function CheckFrom(){
		if (blurUname()==false || blurPass()==false ||blurRepwd()==false ||blurRepwd()==false) {
			return false;
		} else {
			return true;
		}
	}
	// uname获取焦点函数
	function focusUname(){
		// 获取uname后边的p标签,获取焦点时加上提示
		var unamemsg = $('#unamemsg').html('6~18位的除特殊字符外的任意字母、数字、汉字');
	}
	
	// uname失去焦点的函数
	function blurUname(){
		// 获取uname的值
		var uname = $('#uname').val();
		// 如果uname为空的话改变提示信息并且字体改成红色
		if(uname == "") {
			var unamemsg = $('#unamemsg').html('请输入账号').css('color','red');
			return false;
		}
		// 定义正则 (除特殊字符外的任意6~18位的字母、数字、下划线、汉字)
		var reg =  /^[^\~\`\!\@\#\$\%\^\&\*\(\)\-\_\+\=\{\}\[\]\|\\\;\:\'\"\,\.\<\>\/\?]{6,18}$/;
		// 验证 正则匹配
		var flag = reg.test(uname);
        if (flag){
            //验证成功 改变提示信息
            var unamemsg = $('#unamemsg').html('格式正确').css('color','');
        }else {
            //验证失败 改变提示信息和颜色 返回false
            var unamemsg = $('#unamemsg').html('格式不正确').css('color','red');
            return false;
        }
    }

    // password获取焦点函数
	function focusPass(){
		// 获取uname后边的p标签 添加提示信息
		var passmsg = $('#passmsg').html('以字母开头，长度在6~18之间，只能包含字母、数字和下划线');
	}

	// password失去焦点的函数
	function blurPass(){
		// 获取pass的值
		var pass = $('#pass').val();
		if(pass == "") {
			var passmsg = $('#passmsg').html('请输密码').css('color','red');
			return false;
		}
		// 定义正则 (6~18位必须以字母开头,只能包括字母、数字、下划线)
		var reg =  /^[a-zA-Z]\w{5,17}$/;
		// 验证 匹配正则
		var flag = reg.test(pass);
        if (flag){
            //验证成功
            var passmsg = $('#passmsg').html('格式正确').css('color','');
        }else {
            //验证失败
            var passmsg = $('#passmsg').html('格式不正确').css('color','red');
            return false;
        } 
    }

    // 验证确认密码 只判断俩次密码是否一致并加上提示信息
    function blurRepwd(){
    	var pass = $('#pass').val();
    	var repass = $('#repass').val();
    	if(pass != repass) {
    		var repassmsg = $('#repassmsg').html('俩次密码不一致').css('color','red');
    		return false;
    	}
    	if(repass != "" && repass == pass) {
    		var repassmsg = $('#repassmsg').html('俩次密码一致').css('color','');
    	}
    }

    // 验证头像上传
    /*
    	change()方法
    	当元素的值发生改变时，会发生 change 事件。
		该事件仅适用于文本域（text field）,以及 textarea 和 select 元素。
	*/
    function blurfileName(){
    	// console.log($(this).val());	获取到的是完整的文件路径值;C:\fakepath\u=3137872250,621647835&fm=26&gp=0.jpg
    	$('#fileName').change(function(e){
    		console.log(e)
	        /*
		        简单的获取选择文件的名字
		        currentTarget:获取到的是绑定事件的对象
		        e.currentTarget.files 是一个数组，如果支持多个文件，则需要遍历
	        */
	        var fileMsg = e.currentTarget.files;
	        console.log(fileMsg)
	        var fileName = fileMsg[0].name;
	        // 图片名称
	        console.log(fileName);//js-dom.png
	        // 图片大小
	        var fileSize = fileMsg[0].size; //console.log(fileSize);3655k
	        console.log(fileSize)
	        // 判断图片大小是否超过4kb
			if (fileSize >= 39999) {
				 var fileNameMsg = $('#fileNameMsg').html('请上传40kb以内的图片').css('color','red')
	             return false;
			}
			// 图片类型
			var fileType = fileMsg[0].type; //判断文件类型
			console.log(fileType); // iamge/jpg
			 var type=(fileType.substr(fileType.lastIndexOf("/"))).toLowerCase();
			console.log(type)
	        if(type!="/jpg"&&type!="/gif"&&type!="/jpeg"&& type!="/png"){
	            var fileNameMsg = $('#fileNameMsg').html('您上传图片的类型不符合(.jpg |.jpeg |.gif |.png)!').css('color','red')
	             return false;
	        } else {
	        	var fileNameMsg = $('#fileNameMsg').html('头像可用').css('color','')
	        }
    	});
    }
    
</script>

图片展示