jquery 유효성 검사 form_jquery의 단일 선택 및 다중 선택 예

예를 들어 다음 옵션 중에서 *가 있는 항목을 선택해야 합니다. 그림을 참조하세요.

위 페이지를 보셨나요? 비즈니스 처리 채널에서 여러 항목 중 하나를 선택해야 합니다. 어떻게 해야 합니까? 아무 것도 선택하지 않은 경우 양식을 제출할 때 오류 메시지가 표시됩니다. jquery 입력 검증이 매우 간단하다는 것은 누구나 알고 있지만 다중 선택이나 단일 선택을 검증할 필요가 거의 없습니다. 게다가 페이지 전체가 아닌 그룹으로 나누어 검증하는 것입니다! ! 무엇을 해야 할까요?

jquery 대신 다른 것을 사용해도 괜찮나요? 할 수 있다! ! ! 하지만 우리는 이를 구현하기 위해 여전히 jquery를 사용합니다.

먼저 선택하지 않은 효과를 살펴보겠습니다.

하나를 선택하면 아래와 같이 프롬프트 메시지가 즉시 사라집니다.

실제로 이는 jsmap을 사용하여 달성할 수 있습니다. 즉, js를 사용하여 지도를 시뮬레이션하는 것입니다. 다음 코드는 공개입니다. 나중에 이런 상황이 발생하면 다음 js 코드를 복사하고 이를 달성하기 위한 몇 가지 구성을 만드세요.

다음 코드를 사용하려면 jquery verify js를 도입해야 합니다

코드는 다음과 같습니다.

먼저 다음 js 코드를 js 파일이나 페이지에 넣으세요.

코드 복사 코드는 다음과 같습니다.

/**
* 数组存储器 主要是为了方便juery验证chckbox而设计                   数组存储器，配置对象，为验证checkbox 和单选。
* 私有变量区定义数组
* 然后把每一个数组配置到setting里面，这样这个数组就存在于存储器中
* 在应用的时候用数组名即可方便地操作和得到不同的数组。
* 当你需要某个数组的时候，如果你只操作一个数组那这个方法是多于的，但如果你操作多个数组或只有数组名的情况下，这个存储器就很有用。
* @author 电子科大科园 庄濮向
* @return 数组存储器对象
*/
var MapArr = (function () {

    var BHC = [], BCC = [], BQC = [], IC = [];
    var BAC = [];
    var BUC = [];

    var setting = [
            {
                key: "BHC",
                value: BHC
            },
            {
                key: "BAC",
                value: BAC

            }, { key: "BUC", value: BUC }, { key: "BCC", value: BCC }, { key: "BQC", value: BQC }, {key:"IC",value:IC}
            ];

    return {

        //通过数组名得到数组织
        getArr: function (arr_name) {
            for (var setting_i = 0, setting_len = setting.length; setting_i < setting_len; setting_i++) {
if (setting[setting_i].key == arr_name) {
return setting[setting_i].value;
}
}
},
//删除指定数组中的某一个元素
delArr: function (arr_name, elementValue) {
for (var delArr_i = 0, delArr_len = setting.length; delArr_i < delArr_len; delArr_i++) {
if (setting[delArr_i].key == arr_name) {
for (var arr_i = 0, arr_len = setting[delArr_i].value.length; arr_i < arr_len; arr_i++) {
if (setting[delArr_i].value[arr_i] == elementValue) {
setting[delArr_i].value.splice(arr_i, 1);
}
}

                                                                                                                                          for (var pushArr_i = 0, pushArr_len = settings.length; pushArr_i < pushArr_len; pushArr_i ) ~ 🎜>
} ());


/**
*체크박스나 라디오의 클릭 이벤트는 위 지도에 적용됩니다
* @author Zhuang Puxiang, University of Electronic Science and Technology of China
* @return 배열 메모리 객체
*/
function chk(이벤트, arrName) {

if (event.checked == true) {

//arrName이라는 배열에 요소 추가

MapArr.pushArr(arrName, event.value);

} else {

            / /arrName
이라는 배열에서 요소 제거       MapArr.delArr(arrName, event.value);
   }

var checkInput = document.getElementById(arrName);

if (MapArr.getArr(arrName)[0] == '정의되지 않음' || MapArr.getArr(arrName)[0] == null) { checkInput.value = null; 이 경우 검증의 효과가 있습니다

} else {

} checkInput.value = MapArr.getArr(arrName)[0];
}
//프롬프트 정보를 표시하는 방법 값을 추가한 후 사라지나요?
if (!$("#form1").valid()) return false; //이 챕터를 확장하고 사라지게 하기 위한 것이므로 제출된 검사를 실행하지 마세요. 챕터 표시에 영향을 미칩니다.
}

2: 확인해야 하는 다중 선택 또는 단일 선택의 제목 그룹 뒤에 입력을 추가합니다.

코드 복사


코드는 다음과 같습니다.


<input id="BAC" name="BAC" type="text" style="width: 0;height:0 ;border:0" class="required" />

3: 체크박스 또는 라디오 태그에 이벤트 추가:

코드 복사

코드는 다음과 같습니다.

onclick="chk(this,'BAC ')"

4: 일관성: "two"의 입력은 프롬프트 정보에 사용되므로 ID와 이름이 있어야 하며 이름은 위와 같이 일관되어야 합니다. id= " BAC", name="BAC", 입력이 작성된 후 이벤트를 추가할 때 두 번째 매개변수의 이름은 입력의 ID와 동일해야 하며 BAC여야 합니다.

다섯 번째: 구성, 얼굴이 준비되면 핵심 구성입니다. 이 구성을 구성할 곳은 위에서 소개해달라고 요청한 js 코드에 있습니다. onclick="chk(this,'BAC')"는 각 확인 또는 라디오 선택에 이벤트를 추가하는 것입니다. 이는 또한 이 확인이 BAC 배열에 적용되어야 함을 의미하므로 배열 구성 설정으로 이동합니다. MapArr에 배열 추가:

코드 복사

코드는 다음과 같습니다.

var BAC =[];

MapArr 설정에 개체 추가:

코드 복사

코드는 다음과 같습니다.

　｛

　key:"BAC",
　value:BAC
｝

일관성을 확보하세요. 그렇지 않으면 성공하지 못할 것입니다. 요점: 입력의 id는 onclick의 두 번째 매개변수와 일치합니다. MapArr에 추가된 배열 변수의 변수 이름은 입력의 id와 일치합니다. . 설정의 값은 귀하입니다. 이 배열은 구성됩니다. 좋습니다. 이제 확인을 구현할 수 있습니다.