Jquery 플러그인 easyUi는 양식 유효성 검사를 구현합니다. example

구현 예정 기능 : 학생정보 추가시 easyui 검증 기능을 이용하여 학번 중복 여부를 확인하고, 학번은 숫자로만 가능함

최종 효과는 아래와 같습니다.

그런데 이 과정에서 일련의 문제에 부딪혔습니다.

validatebox의 인증 방법을 확장하면 초기 인증 코드는 다음과 같습니다.

//学号格式只能为数字  ****//这里没有问题****
number: {//value值为文本框中的值
  validator: function (value) {
    var reg = /^[0-9]*$/;
    return reg.test(value);
  },
  message: '学号格式不正确.'
},
//验证学号不能重复
snumber: {
   //param参数为textarea的id值
   validator: function (value, param) {
     //将从后台获取的json数据先放入textarea，再获取出来后解析成数组
     var snumbers = $.parseJSON($(param)[0].val());
     for(var i=0;i < snumbers.length;i++){
       if(value == snumbers[i]){ //如果学号有重复返回false
         return false;
       }
     }
     return true;
 }

로그인 후 복사

여기에서는 다른 문제도 있고 몇 가지 문제도 발생했기 때문에 학생증 재인증만 수행하겠습니다.

양식은 처음에는 다음과 같이 작성되며, validType 속성은 data-options 속성에 작성됩니다.

<input id="addSnumber" class="easyui-textbox" style="width: 200px; height: 30px;" type="text" name="snumber" data-options="required:true,validType:'snumber[#snumbers]', missingMessage:'请输入学号'" />
<textarea id="snumbers" style="display: none"></textarea>

로그인 후 복사

여기에 문제가 있습니다. #snumbers를 따옴표로 묶어야 하기 때문에 Firebug는 오류를 보고합니다. 그러나 따옴표를 직접 추가하면 오류가 발생합니다. 이는 제가 확인한 바와 같습니다. 인터넷에 많은 정보가 있고 일부는 이스케이프 기능을 사용합니다. Easyui의 소스 코드가 변경되지 않는 한 이것은 easyui 구문 분석에 문제가 있는 것 같습니다. 혹시 아시는 분 계시면 알려주시면 감사하겠습니다.
그런 다음 validType 속성을 외부에 넣으면 다음과 같이 확인이 성공합니다.

<input id="addSnumber" validType="snumber['#snumbers']" class="easyui-textbox" style="width: 200px; height: 30px;" type="text" name="snumber" data-options="required:true, missingMessage:'请输入学号'" />
<textarea id="snumbers" style="display: none"></textarea>

로그인 후 복사

그런 다음 새로운 질문이 생깁니다. 학생 번호 형식 확인을 추가하는 방법은 무엇입니까?

이렇게 작성했는데 작동하지 않는군요. Firebug에서 다양한 방법을 시도했지만 작동하지 않는 것 같습니다.

<input id="addSnumber" validType="['snumber['#snumbers']', 'number']" class="easyui-textbox" style="width: 200px; height: 30px;" type="text" name="snumber" data-options="required:true, missingMessage:'请输入学号'" />
<textarea id="snumbers" style="display: none"></textarea>

로그인 후 복사

그런 다음 easyui 컨트롤을 동적으로 로드하는 다른 방법을 시도했지만 두 검증을 합쳤을 때 여전히 동일한 문제가 있었습니다. 여기서는 easyui 구문 분석 문제를 해결했음에 틀림없으므로 걱정하지 않겠습니다.

여기서 두 가지 문제가 발생했습니다. 하나는 ajax에서 반환한 데이터를 validType 속성에 넣는 방법입니다. 즉, 데이터를 저장하기 위해 다른 텍스트 영역을 사용하지 않는 것입니다. 안내해 주세요.

두 번째 문제는 easyui 컨트롤의 동적 설정이 유효하지 않다는 것입니다. 간단히 말하면 코드는 다음과 같습니다.

<input id="addSnumber" style="width: 200px; height: 30px;" type="text" name="snumber" />
//设置easyui控件
$("#addSnumber").attr("class", "easyui-textbox");
//设置验证属性
$("#addSnumber").attr("validType","snumber['#snumber']");
上面这样在jQuery里设置easyui控件后，没有效果，后来百度了下，动态添加easy控件后需要重新渲染下，如下：
//设置easyui控件
$("#addSnumber").attr("class", "easyui-textbox");
//设置验证属性
$("#addSnumber").attr("validType","snumber['#snumber']");
//解析所有页面
$.parser.parse();

로그인 후 복사

그렇지만 easyui의 API를 살펴본 후 특정 DOM 요소만 구문 분석할 수 있다는 것을 알았습니다.

다음 코드는 효과를 얻지 못합니다:

//设置easyui控件
$("#addSnumber").attr("class", "easyui-textbox");
//设置验证属性
$("#addSnumber").attr("validType","snumber['#snumber']");
//解析指定元素
$.parser.parse($("#addSnumber"));

로그인 후 복사

나중에 바이두를 통해 알게 된 사실:

파서는 $("#addSnumber") 자체를 포함하지 않고 $("#addSnumber")의 하위 요소만 렌더링하며 해당 하위 요소에는 Easyui에서 지원하는 컨트롤 클래스가 포함되어 있지 않으므로 이 위치는 Got 원하는 효과.

따라서 단일 요소를 렌더링하려면 다음과 같이 작성해야 합니다.

//设置easyui控件
$("#addSnumber").attr("class", "easyui-textbox");
//设置验证属性
$("#addSnumber").attr("validType","snumber['#snumber']");
//解析指定元素，找它的父元素
$.parser.parse($("#addSnumber").parent());

로그인 후 복사

이전 질문으로 돌아가서 학번이 중복될 수 없는지, 학번 형식이 맞는지 확인하세요.

마지막으로 온라인에서 각종 정보를 확인해보니 학생증을 모두 클라이언트에 먼저 로딩한 뒤 인증을 했기 때문에 제 아이디어가 먹히지 않는 것을 발견했는데, 이 과정에서 여러 사용자가 학생증을 추가하면 문제가 발생했습니다. 기간, 중복이 발생할 수 있습니다.

그래서 마지막으로 모든 학생증을 획득하는 작업을 다음과 같이 검증 기능에 넣습니다.

//验证学号不能重复
snumber: {
  validator: function (value) {
    var flag = true;
    $.ajax({
      type: "post",
      async: false,
      url: "/sims/StudentServlet&#63;method=AllSNumber",
      success: function(data){//在验证函数里加载数据，加载过来后判断输入的值
        var snumbers = $.parseJSON(data);
        for(var i=0;i < snumbers.length;i++){
          if(value == snumbers[i]){
            flag = false;
            break;
          }
        }
      }
    });
    
    return flag;
  },
  message: '学号重复'
},

로그인 후 복사

이렇게 작성하면 판단을 위한 데이터를 실시간으로 로드할 수 있다는 장점이 있고, 양식을 제출할 때 다시 판단을 위한 데이터도 로드하게 되며 매개변수를 전달할 필요가 없으므로 더 이상 삼중 따옴표가 없지만 하나만 있습니다. 단점은 데이터베이스를 여러 번 요청하고 많은 서버 리소스를 소비한다는 것입니다.

양식을 제출할 때 다음 문장을 추가하여 양식을 확인하세요.

//验证表单
var validate = $("#editStuForm").form("validate");
if(!validate){
　　$.messager.alert("消息提醒","请检查你输入的数据!","warning");
　　return;
} else{
　　//提交
}

로그인 후 복사

또 다른 질문이 있습니다. 양식 코드는 다음과 같습니다.

<input id="addSnumber" class="easyui-textbox" validType="'snumber', 'number'" style="width: 200px; height: 30px;" type="text" name="snumber" data-options="required:true, missingMessage:'请输入学号'" />

로그인 후 복사

validType 속성을 데이터 옵션 외부에 배치한 후에는 확인할 수 없으며 Firebug에서 오류를 보고합니다! ! !

마지막으로 데이터 옵션에 넣습니다.

<input id="addSnumber" class="easyui-textbox" style="width: 200px; height: 30px;" type="text" name="snumber" data-options="required:true, validType:['snumber', 'number'], missingMessage:'请输入学号'" />

로그인 후 복사

좋아요, 모든 것이 정상입니다. 두 가지 인증 모두 괜찮습니다! ! !
요약: easyui는 중복과 형식, 다중 검증을 검증합니다

//学号格式只能为数字
number: {//value值为文本框中的值
  validator: function (value) {
    var reg = /^[0-9]*$/;
    return reg.test(value);
  },
  message: '学号格式不正确.'
},
//验证学号不能重复
snumber: {
  validator: function (value) {
    var flag = true;
    $.ajax({
      type: "post",
      async: false,
      url: "/sims/StudentServlet&#63;method=AllSNumber",
      success: function(data){//在验证函数里加载数据，加载过来后判断输入的值
        var snumbers = $.parseJSON(data);
        for(var i=0;i < snumbers.length;i++){
          if(value == snumbers[i]){
            flag = false;
            break;
          }
        }
      }
    });
    
    return flag;
  },
  message: '学号重复'
},

로그인 후 복사

<tr>
  <td>学号:</td>
  <td>
     <input id="addSnumber" class="easyui-textbox" style="width: 200px; height: 30px;" type="text" name="snumber" data-options="required:true, validType:['snumber', 'number'], missingMessage:'请输入学号'" />
  </td>
</tr>

로그인 후 복사

최종 효과는 아래와 같습니다.