本文介绍了使用jQuery进行前端表单验证，包括用户名、密码、邮箱、电话等字段的检查，以及省市二级联查的实现。同时，展示了如何通过Ajax显示分类信息和实现站内搜索功能，以及检查用户名是否已存在的功能。
常见前端代码
一、jquery编写自动输入提示信息
/**
* 自定义输入提示信息
*/
$(function(){
var regexPass =/^[A-Za-z]\w{5,}$/;//必须字母开始,长度不小于5+1
var regexEmail = /^\w+@\w+[.](com||cn|com.cn||org||gov)$/g;//邮箱格式
var regexTel=/^\d{11}$/;//电话格式
$("#username").focus(function(){
var usernameInput = $(this).val();//input中
var Info;//不能取和usernameInfo同名,js文件usernameInput不用定位可直接获取,会发生数据紊乱
if(usernameInput==''||usernameInput==null){
var Info = "用户名不能为空";
$("#usernameInfo").css("color", "red");
}else{
var Info = "";
}
$("#usernameInfo").html(usernameInfo);
});
$("#password").blur(function(){
var passwordInput = $(this).val();
var Info;
if(!regexPass.test(passwordInput)){
Info = "必须字母开始,长度不小于6";
$("#passwordInfo").css("color", "red");
}else {
Info = "密码符合要求";
$("#passwordInfo").css("color", "green");
}
$("#passwordInfo").html(Info);
});
$("#password").focus(function(){
var passwordInput = $(this).val();
var Info;
if(passwordInput==''||passwordInput==null){
Info = "密码不能为空";
$("#passwordInfo").css("color", "red");
}else{
Info = "";
}
$("#passwordInfo").html(Info);
});
$("#confirmpwd").blur(function(){
var confirmpwdInput = $(this).val();
var passwordInput = $("#password").val();
var Info;
if(!(confirmpwdInput==passwordInput)){//注意加括号
Info = "两次密码不一致";
$("#confirmpwdInfo").css("color", "red");
}else{
Info = "密码一致";
$("#confirmpwdInfo").css("color", "green");
}
$("#confirmpwdInfo").html(Info);
});
$("#confirmpwd").focus(function(){
var confirmpwdInput = $(this).val();
var Info;
if(confirmpwdInput==''||confirmpwdInput==null){
Info = "确认密码不能为空";
$("#confirmpwdInfo").css("color", "red");
}else{
Info = "";
}
$("#confirmpwdInfo").html(Info);
});
$("#email").blur(function(){
var emailInput = $(this).val();
var Info;
if(!regexEmail.test(emailInput)){
Info = "邮箱格式不正确";
$("#emailInfo").css("color", "red");
}else{
Info = "邮箱格式正确";
$("#emailInfo").css("color", "green");
}
$("#emailInfo").html(Info);
});
$("#email").focus(function(){
var emailInput = $(this).val();
var Info;
if(emailInfo==''||emailInfo==null){
emailInfo = "邮箱不能为空";
$("#emailInfo").css("color", "red");
}else{
emailInfo = "";
}
$("#emailInfo").html(Info);
});
$("#name").blur(function(){
var nameInput = $(this).val();
var Info;
if(nameInput==''||nameInput==null){
nameInfo = "姓名不能为空";
$("#nameInfo").css("color", "red");
}else{
nameInfo = "";
}
$("#nameInfo").html(Info);
});
$("#province").blur(function(){
var provinceInput = $(this).val();
var Info;
if(provinceInput=='--请选择--'){//默认值
Info = "籍贯未选";
$("#provinceInfo").css("color", "red");
}else{
Info = "";
}
$("#provinceInfo").html(Info);
});
$("#telephone").blur(function(){
var telephoneInput = $(this).val();
var Info;
if(!regexTel.test(telephoneInput)){
Info = "电话格式不符合要求";
$("#telephoneInfo").css("color", "red");
}else {
telephoneInfo = "电话符合要求";
$("#telephoneInfo").css("color", "green");
}
$("#telephoneInfo").html(Info);
});
$("#telephone").focus(function(){
var telephoneInput = $(this).val();
var Info;
if(telephoneInfo==''||telephoneInfo==null){
Info = "电话不能为空";
$("#telephone").css("color", "red");
}else{
Info = "";
}
$("#telephoneInfo").html(Info);
});
});
二、jquery编写省市二级联查
/* *
* 自定义JS文件:省市二级联查
*/
$(function() {
//2.创建二维数组存储省份和城市
var cities = new Array(34);
cities[0] = new Array("北京","东城区", "西城区", "朝阳区", "海淀区");
cities[1] = new Array("天津","河西区", "河东区", "和平区", "南开区");
cities[2] = new Array("上海","静安区", "黄浦区", "徐汇区", "普陀区");
cities[3] = new Array("重庆","渝中区", "江北区", "沙坪坝区", "九龙坡区");
cities[4] = new Array("河北","保定市", "石家庄市", "唐山市", "秦皇岛市");
cities[5] = new Array("山西","太原市", "大同市", "阳泉市", "长治市");
cities[6] = new Array("辽宁","沈阳市", "大连市", "鞍山市", "抚顺市");
cities[7] = new Array("吉林","长春市", "吉林市", "四平市", "辽源市");
cities[8] = new Array("黑龙江","哈尔病市", "齐齐哈尔市", "鸡西市", "鹤岗市");
cities[9] = new Array("江苏","南京市", "无锡市", "徐州市", "苏州市");
cities[10] = new Array("浙江","杭州市", "宁波市", "温州市", "嘉兴市");
cities[11] = new Array("安徽","合肥市", "淮南市", "马鞍山市", "淮北市");
cities[12] = new Array("福建","福州市", "厦门市", "泉州市", "莆田市");
cities[13] = new Array("江西","南昌市", "鹰潭市", "上饶市", "抚州市");
cities[14] = new Array("山东","济南市", "威海市", "滨州市", "淄博市");
cities[15] = new Array("河南","郑州市", "洛阳市", "开封市", "安阳市");
cities[16] = new Array("湖北","武汉市", "黄石市", "十堰市", "宜昌市");
cities[17] = new Array("湖南","长沙市", "株洲市", "湘潭市", "衡阳市");
cities[18] = new Array("广东","广州市", "深圳市", "佛山市", "东莞市");
cities[19] = new Array("海南","海口市", "三亚市", "三沙市", "五指山市");
cities[20] = new Array("四川","成都市", "自贡市", "攀枝花市", "泸州市");
cities[21] = new Array("贵州","贵阳市", "六盘水市", "遵义市", "安顺市");
cities[22] = new Array("云南","昆明市", "大理市", "丽江市", "普洱市");
cities[23] = new Array("陕西","西安市", "铜川市", "宝鸡市", "咸阳市");
cities[24] = new Array("甘肃","兰州市", "嘉峪关市", "金昌市", "白银市");
cities[25] = new Array("青海","西宁市", "海东市", "玉树市", "格尔木市");
cities[26] = new Array("台湾","台北市", "新竹市", "台中市", "高雄市");
cities[27] = new Array("内蒙古","呼和浩特市", "包头市", "乌海市", "赤峰市");
cities[28] = new Array("广西","南宁市", "柳州市", "桂林市", "梧州市");
cities[29] = new Array("西藏","拉萨市", "昌都市", "林芝市", "山南市");
cities[30] = new Array("宁夏","银川市", "石嘴山市", "吴忠市", "固原市");
cities[31] = new Array("新疆","乌鲁木齐市", "吐鲁番市", "哈密市", "昌吉市");
cities[32] = new Array("香港","油尖旺区", "屯门区", "离岛区", "黄大仙区");
cities[33] = new Array("澳门","圣方济各堂区", "望德堂区", "风顺堂区", "大堂区");
$("#province").change(function() {
//10.清除第二个下拉列表内容,否则上一次选择的内容会驻留在第二次下拉列表
$("#city").empty();
//1.获取用户选择的省份
var val = this.value;
var key;
for(var i=0;i<cities.length;i++){
if(val==cities[i][0]){
key=i;//获得省份下标
}
}
//3.遍历二维数组中的省份
$.each(cities, function(i, n) {
//4.判断用户选择省份和遍历的省份
if (key == i) {
//5.遍历该省份下的所有城市
$.each(cities[i], function(j, m) {
//alert(m);
if(j>0){//去掉cities[i][0]节点
//6.创建城市文本节点
var textNode = document.createTextNode(m);
//7.创建option元素节点
var opEle = document.createElement("option");
//8.将城市文本节点添加到option元素节点中去
//注意这里的方法是jq的方法使用时注意加上$()
$(opEle).append(textNode);
//9.将option元素节点追加到第二个下拉列表中
$(opEle).appendTo($("#city"));
}
});
}
});
});
});
三、使用ajax显示分类信息
<!-- 完成异步查找分类数据 -->
<script type="text/javascript">
$(function(){
var content = "";
$.post(
"${pageContext.request.contextPath}/productCategoryList",
function(data){
//[{"cid":"xxx","cname":"xxxx"},{},{}]
for(var i=0;i<data.length;i++){
content+="<li><a href='${pageContext.request.contextPath}/productListByCid?cid="+data[i].cid+"'>"+data[i].cname+"</a></li>";
}
$("#categoryUl").html(content); //将拼接好的li放置到ul中
},
"json"
);
});
</script>
四、使用ajax实现站内搜索
<!-- 完成异步站内搜索 -->
<script type="text/javascript">
function overFn(obj){
$(obj).css("background","#DBEAF9");
}
function outFn(obj){
$(obj).css("background","#fff");
}
function clickFn(obj){
$("#search").val($(obj).html());
$("#showDiv").css("display","none");
}
function searchWord(obj){
//1、获得输入框的输入的内容
var word = $(obj).val();
//2、根据输入框的内容去数据库中模糊查询---List<Product>
var content = "";
$.post(
"${pageContext.request.contextPath}/productSearchWord",
{"word":word},
function(data){
//3、将返回的商品的名称 现在showDiv中
//[{"pid":"1","pname":"小米 4c 官方版","market_price":8999.0,"shop_price":8999.0,"pimage":"products/1/c_0033.jpg","pdate":"2016-08-14","is_hot":1,"pdesc":"小米 4c 标准版 全网通 白色 移动联通电信4G手机 双卡双待 官方好好","pflag":0,"cid":"1"}]
if(data.length>0){
for(var i=0;i<data.length;i++){
content+="<div style='padding:5px;cursor:pointer' onclick='clickFn(this)' onmouseover='overFn(this)' onmouseout='outFn(this)'>"+data[i]+"</div>";
}
$("#showDiv").html(content);
$("#showDiv").css("display","block");
}
},
"json"
);
}
</script>
五、使用ajax判断用户民是否存在
<script type="text/javascript">
$(function() {//AJAX判断用户是否存在
$("#username").blur(function() {
var usernameInput = $(this).val();
$.post(
"${pageContext.request.contextPath}/checkUsername",
{ "username" : usernameInput }, //输入的用户名
function(data) {//回调函数,data响应参数对象
var isExist = data.isExist;
var usernameInfo = "";
if (isExist) {
usernameInfo = "该用户名已经存在";
$("#usernameInfo").css("color", "red");
} else {
usernameInfo = "该用户可以使用";
$("#usernameInfo").css("color", "green");
}
$("#usernameInfo").html(usernameInfo);//html相当于innerHTML
},
"json"
);
});
});
</script>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
